web-dev-qa-db-ja.com

.delay（）および.setTimeout（）

.delay()のjQueryドキュメントによると、

.delay（）メソッドは、キューに入れられたjQuery効果間の遅延に最適です。これは制限されているため（たとえば、遅延をキャンセルする方法を提供していません）、. delay（）は、JavaScriptのネイティブのsetTimeout関数に代わるものではありません。

誰かがこれを拡張してくれませんか？いつ.delay()を使用する方が適切であり、いつ.setTimeout()を使用する方が適切ですか？

jquerysettimeout
19
Randomblue

あなたが投稿したものは本当にそれを説明していると思います。

アニメーションを含むjQuery効果には.delay()を使用します。

setTimeout()は、その他すべてに最適です。たとえば、特定の経過時間にイベントをトリガーする必要がある場合。

25
adamjmarkham

私が理解している限り、.delay()は、特定のjQueryキュー内のメソッド間に遅延を追加することを特に目的としています。たとえば、1秒間に画像をフェードインして5秒間表示し、さらに1秒間かけて画像を再びフェードアウトしたい場合は、次のようにします。

_$('#image').fadeIn(1000).delay(5000).fadeOut(1000);
_

このインスタンスでは、.delay()は、特定のjQueryキューでイベントを遅延させるために特別に意図されているため、より直感的に使用できます。一方、setImeout()はネイティブJavaScriptメソッドであり、キュー行を明示的に意図したものではありません。ボタンをクリックしてから1秒後にアラートボックスをポップアップさせるには、次のようにします。

_function delayAlert() {
    var x = setTimeout("alert('5 seconds later!')", 5000);
}

<input type="submit" value="Delay!" onclick="delayAlert();" />
_
5
Derrick Tucker

.delay()は、ほとんどの場合、間に一時停止があるアニメーション効果を一緒にチェーンするために使用されます。

ドキュメントが言及するように、遅延をキャンセルする方法はありません。遅延をキャンセルしたい場合は、代わりにsetTimeout()を使用して、clearTimeout()でキャンセルできるようにします。

2
sberry

たとえば、アニメーションでdelayを使用できます。

$('.message').delay(5000).fadeOut();

timeOutを使用して、アニメーションの開始を遅らせることもできます。次に例を示します。

window.setTimeout(function(){
  $('.message').fadeOut();
}, 5000);

ご覧のとおり、アニメーションではdelayよりもsetTimeoutを使用する方が簡単です。

setTimeoutを使用すると、ほとんど何でも遅延できますが、アニメーションを遅延できるのはdelayのみです。アニメーションではないメソッドはdelayの影響を受けないため、要素を非表示にする前にしばらく待機せず、すぐに非表示にします。

$('.message').delay(5000).hide();
2
Guffa

Delay（）のもう1つの副作用：遅延が終わるまで、遅延しているオブジェクトを非表示にする（またはフェードアウトするなど）機能が無効になるようです。

たとえば、次のコードを設定して（おそらく、stackoverflow開発者がcss名を認識します...）、「div」を非表示にします。

 $j(document).ready(function(){
   var $messageDiv = $j("<div>").addClass('fading_message')
       .text("my alert message here").hide();
   var $closeSpan = $j("<span>").addClass('notify_close').text("x");
   $closeSpan.click(function() {$j(this).parent().slideUp(400);});
   $messageDiv.append($closeSpan);
   $j('.content_wrapper_div').prepend($messageDiv);
   $messageDiv.fadeTo(500, .9).delay(5000).fadeTo(800,0);
 });

スパン（「div」にある）にある「x」をクリックすると、クリック機能が起動しました（そこで警告をテストしました）が、divは指示どおりにSlideUpしませんでした。しかし、私が最後の行をこれで置き換えると：

     $messageDiv.fadeTo(500, .9);

..その後、機能しました。「x」をクリックすると、周囲のdivがSlideUpになり、離れます。 $ messageDivの "delay（）"関数のバックグラウンド実行がそのオブジェクトを "ロック"しているように思われるため、それを閉じることを試みる別のメカニズムは、遅延が完了するまでそれを行うことができませんでした。

1
Glen