イナヅマTVログ

[JavaScript] jQuery delay, queue, dequeueのおさらい

| 0件のコメント

jQueryでdelay, queue, dequeueを使ってみた。
忘れないようにのメモ。

delay

jQuery API: .delay()

duration: 待機時間(ミリ秒) *必須
queueName: queue名称(文字) *オプション
戻り値はjQuery Object

/**
 * @param {Number} duration
 * @param {String=fx} [queueName] optional
 * @returns {jQuery}
 */
.delay( duration [, queueName ] )

アニメーションを連続させる時の遅延として使えるらしい。
setTimeout の代替関数では無いと注意書きあり。

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn’t, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript’s native setTimeout function, which may be more appropriate for certain use cases.

jQuery.queue

jQuery API: queue

/**
 * @param {DOMElement} element
 * @param {String=fx} [queueName] optional
 * @returns {jQuery}
 */
jQuery.queue( element [, queueName ] )

Note: This is a low-level method, you should probably use .queue() instead.

low-level method なので代わりに .queue を使うらしい。

queue

jQuery API: queue

/**
 * @param {String=fx} [queueName] optional
 * @returns {Array}
 */
.queue( [queueName ] )

.queue は jQuery Object じゃなくて配列を返す。

jQueryは引数の数や型に色んなパターンが用意されていて便利そうだけど覚えるの大変。
.queueもそのひとつ。

/**
 * @param {String=fx} [queueName] optional
 * @param {Array} newQueue [Function,...]
 * @returns jQuery
 */
.queue( [queueName ], newQueue )

この3番目のが使いやすそう。

/**
 * @param {String=fx} [queueName] optional
 * @param {Function} callback
 * @returns jQuery
 */
.queue( [queueName ], callback( next ) )

メソッドチェーンするときは callback の中で dequeue するらしい。

<div id="box" style="position: absolute; background: #efefef;">Box</div>
var $box = $( "#box" );
$box.delay( 1000 )
.queue( function (){
    $box.css( { width: "100px", height: "100px", backgroundColor: "#f00" } ).dequeue();
} )
.delay( 500 )
.animate(
    {
        top: "100px",
        left: "500px"
    }, 
    {
        duration: 1000,
        complete: function (){
            console.log( "complete pos" );
        }
    }
);

CSS class を付与した後遅延してアニメーションする時とかに使えそう。

dequeue

$.dequeue( this );

こんな感じでもいいのネ。
今さらながらjQueryは奥深い。

コメントを残す