delay(duration, [queueName])


version 1.4 以降

解説

キュー内の関数の実行を遅延します。
duration で指定した時間後に、キュー内にある次の関数を実行します。

引数

  • duration
    Number, String: 遅延時間。ミリ秒で指定します。
    "fast" and "slow" の文字列での指定も可能です。
    ("fast" → 200ms / "slow" → 600ms)
  • [queueName]オプション
    String: キューの名前。指定しない場合は、デフォルトの fx キューを遅延します。

戻り値

  • jQuery: jQuery オブジェクト

例1:delay() を使用して、toggle("slow") を実行するまでの時間を遅延します。
block2 は 1秒後、block3 は 2秒後に実行します。

$("#run").click(function(){
    $("#block1").toggle("slow");
    $("#block2").delay(1000).toggle("slow"); // 1秒後に実行
    $("#block3").delay(2000).toggle("slow"); // 2秒後に実行
});

テスト1


block1
block2
block3

内部実装

内部実装は、setTimeout() を使用し、指定した時間後に jQuery.dequeue() を実行する関数がキューに追加されます。




jquery-1.4.2.js (Uncompressed) line1190-1200から抜粋
delay: function( time, type ) {
    time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
    type = type || "fx";

    return this.queue( type, function() {
        var elem = this;
        setTimeout(function() {
            jQuery.dequeue( elem, type );
        }, time );
    });
},