MW211 EXIT

devlog
jQuery/遅延(delay)(3)非アニメーション系メソッド
2018年08月13日
┌──────────────────────────────────────┐
│setTimeout(function() {$('div').text('1秒後に表示');}, 1000);               │
└──────────────────────────────────────┘
とはいえ、アニメーション系メソッド以外でも遅延処理をしたいという場合がある。
例えば、上記のようにsetTimeout()を使えばよいのだが、
.delay()でやってみたい。そんな時の方法。

まず、アニメーション系メソッドは、キュー(queue)というものに登録されて
順番に実行するものである点を理解しなければならない。

つまり、アニメーション系メソッドは、実行した瞬間に実行されるのではなく
実行した瞬間は、キュー(queue)に登録されるだけで
キュー(queue)の方で先入先出で順番に実行していくのだ。
よって、.delay()が効くという寸法になっているのだ。

ってことで、自動で行われるキュー(queue)の登録を手動に行えばよい。
┌──────────────────────────────────────┐
│$('div').delay(1000).queue(function() {                                     │
│    $(this).text('1秒後に表示').dequeue();                                  │
│});                                                                         │
└──────────────────────────────────────┘
つまり、上記のような感じ。
.dequeue()を用いて、キュー(queue)からの削除も手動で行う必要がある点に注意。

これを応用すれば以下のおうに要素を追加することもできる。
┌──────────────────────────────────────┐
│$('div').delay(1000).queue(function() {                                     │
│    $(this).append(                                                         │
│        $('<span>').text('1秒後に表示')                                     │
│    ).dequeue();                                                            │
│});                                                                         │
└──────────────────────────────────────┘

ちなみに、キュー(queue)をクリアする方法は以下の通り。
┌──────────────────────────────────────┐
│$('div').clearQueue();                                                      │
├──────────────────────────────────────┤
│$('div').queue([]);                                                         │
└──────────────────────────────────────┘

また、キューの数を確認するには以下の通り。
┌──────────────────────────────────────┐
│$('div').queue().length                                                     │
└──────────────────────────────────────┘
分類:jQuery