[jQuery] 時間差で要素リストにクラスを追加するのに便利な .queue() メソッド
posted : 2020.04.18
こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。
サイトをコーディングしていて、時間差で要素にインタラクションを設定したい時が個人的には結構あります。
基本的にアニメーションはCSS側で処理させた方がパフォーマンスが良好なので、そうなると時間差でクラスを要素リストに付与させたい、となるわけです。
まあごちゃごちゃ言ってないで先ずは結論のコードから。
時間差で要素リストにクラスを追加するスクリプト
const element = $('.element');
const delayTime = 300;
element.each(function (i) {
$(this).delay(i * delayTime).queue(function () {
$(this).addClass('is-active').dequeue();
});
});
遅延実行.delay()はエフェクト系メソッドでしか遅延しない
○○秒後に〇する、みたいな書き方は色々あると思いますが（setTimeoutとか）、jQueryを使用できる環境なら.delay()がお手軽。
でもこの.delay()、jQueryのエフェクト系メソッド（.animate()とか.fadeIn()とか）でしか遅延してくれない特徴があります。
つまりエフェクト系メソッドではないaddClassとかを、
.delay(100).addClass('is-active')
としても遅延してくれないわけですね。
.delay()と.queue()の合わせ技でエフェクト系メソッド以外でも遅延実行を実現する
そんな時に登場するのが.queue()メソッド（と.dequeue()メソッド）です。
サンプルコードのように.delay()の後で.queue()メソッドを呼び出し、非エフェクト系メソッドによる処理（関数）を登録してやるとうまくいきます。
あとは.eachで時間差分として宣言した変数delayTimeとindex番号を乗算しつつループ処理してやればOK。
.dequeue()メソッドでキュー削除を忘れずに
サンプルコードの.addClass()後に.dequeue()を呼び出してますが、これはキューを削除するためのメソッドです。
エフェクト系メソッドは自動的にキューを削除＆次の処理を開始してくれるんですが、.queue()で追加した非エフェクト系メソッドによる処理はキューの削除が自動で行われないのです。
いきなりキューとか言われてもわかんねえよ！って感じですか？
安心して下さい。
ぼくもよくわかってないです笑
まあざっくりいうと、.dequeue()をしてやらないとその後の処理が発火しなかったりするのです。
まあ.queue()と.dequeue()はセットで考えといた方が良いぞってことですな。
