jQuery / メソッド / .delay() - エフェクトキューの次の処理を遅らせる

jQueryの.delay()は、キュー内で後に続く処理の実行を遅らせます。実行中の関数そのものやJavaScript全体を停止する機能ではありません。そのキューを使わない通常のメソッドは、.delay()の後につないでもすぐに実行される場合があります。

どの処理が待機するかを区別する

.delay()の公式仕様は.delay(duration, queueName)です。durationの単位はミリ秒で、queueNameを省略すると既定のエフェクトキューfxに待機処理を追加します。キューは要素ごとに順番に実行する処理の待ち行列です。先行処理が終わり、待機処理の番になってから時間を数え始めます。

.delay(800)は既定のキューに800ミリ秒の待機を加えます。"fast"と"slow"もそれぞれ200・600ミリ秒として使えますが、比較には数値が明確です。先行する効果が200ミリ秒なら、その効果が終わった後でさらに800ミリ秒待ちます。効果の時間と待機時間は別です。

show(0)とshow()を比較する完全な例

全コードをUTF-8のdelay-demo.htmlとして保存し、ブラウザーで開きます。コンテンツ配信ネットワーク（CDN）から公式のjQuery全体版を読み込むためインターネット接続が必要ですが、パッケージのインストールは不要です。effectsを含まないslim版は使いません。

コードは4.0.0を読み込みます。キューでの待機、即時表示、JavaScriptの続行、待機中のリセット、通常のタイマー解除を3.7.1と4.0.0で実行しました。二つのボックスは最初は非表示で、表示用ボタンはそれぞれ別のボックスを操作します。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Delay a queued effect, not JavaScript</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .box { display: none; padding: 16px; margin: 12px 0; background: #e4f2ef; }
    button, select { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Delay a queued effect, not JavaScript</h1>
  <label for="wait">Wait:</label>
  <select id="wait"><option value="800">800 ms</option><option value="200">200 ms</option></select>
  <button type="button" id="run">Queued show(0)</button>
  <button type="button" id="trap">Immediate show()</button>
  <button type="button" id="reset">Reset</button>
  <div class="box" id="queued">A queued display operation</div>
  <div class="box" id="plain">An immediate display operation</div>
  <p>Queue phase: <span id="phase">ready</span></p>
  <p id="continued"></p>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const $queued = $("#queued");
      const $plain = $("#plain");
      let busy = false;
      function report() {
        const queued = $queued.is(":visible") ? "visible" : "hidden";
        const plain = $plain.is(":visible") ? "visible" : "hidden";
        $("#result").text(`queued=${queued} | plain=${plain}`);
      }
      $("#run").on("click", function () {
        if (busy) return;
        busy = true;
        $("#phase").text("waiting");
        $queued.stop(true, false).hide()
          .delay(Number($("#wait").val()))
          .show(0, function () {
            busy = false;
            $("#phase").text("done");
            report();
          });
        $("#continued").text("Script continues immediately");
        report();
      });
      $("#trap").on("click", function () {
        $plain.stop(true, false).hide()
          .delay(Number($("#wait").val())).show();
        report();
      });
      $("#reset").on("click", function () {
        $queued.add($plain).stop(true, false).hide();
        busy = false;
        $("#phase").text("ready");
        $("#continued").text("");
        report();
      });
      report();
    });
  </script>
</body>
</html>

初期結果は次のとおりです。

queued=hidden | plain=hidden

1. Waitを800 msのままにしてQueued show(0)を押します。Queue phaseはwaitingで、最初のボックスはまだ非表示です。
2. Script continues immediatelyはすぐに現れます。.delay()は後続のJavaScriptを止めていません。
3. 待機後に最初のボックスが現れ、phaseがdone、結果がqueued=visible | plain=hiddenになります。
4. Reset後にImmediate show()を押すと、二つ目が待たずに現れ、queued=hidden | plain=visibleになります。引数なしの.show()がキュー外で動くためです。
5. 再びResetし、Waitを200 msにしてQueued show(0)を押すと、待機が短くなります。
6. 800 msの待機中にResetすると、両方が非表示のまま、phaseはreadyに戻ります。元の待機時間が過ぎても最初のボックスは再表示されません。

.show(0)の0は、その処理の番が来た後の表示効果の所要時間です。先行する待機を取り消す値ではありません。即時の.show()と、キューに入る.show(0)は区別します。

キュー名とリセット範囲を管理する

.queue()は要素の処理キューを扱います。名前付きキューでは待機と後続処理に同じ名前を使います。独自キューが自動で開始するとは考えず、.dequeue("work")のように対応する名前で明示的に開始します。

Resetの.stop(true, false)は、この例のエフェクトキューを整理し、現在の進行を止めます。検証した両バージョンでは、待機中のリセット後に予定された表示は起きませんでした。.delay()自体は通常のタイマーIDや独立した解除ハンドルを返さないため、あらゆるJavaScript処理の予約・解除には使いません。

.clearQueue()は未実行のキュー項目を取り除きます。将来の処理を除くことと、進行中の処理を止めることは別です。この例は二つのボックスだけを初期化し、実行中のQueued show(0)の追加操作はbusyで無視して待機の蓄積を防ぎます。

一般の関数の予約と解除にはタイマーを使う

アニメーションキューと関係のない関数はsetTimeout()で予約します。解除する場合は、返されたIDをclearTimeout()に渡します。開発者ツールのConsoleで次の完全な部分コードを実行すると、800ミリ秒後のlaterは取り消され、cancelledだけが出ます。

const timer = setTimeout(() => console.log("later"), 800);
clearTimeout(timer);
console.log("cancelled");

cancelled

タイマーやエフェクトキューの時間は、正確な実行時刻を保証しません。ブラウザーの他の作業やタブの状態によって遅れることがあります。重要な後続処理は固定の待ち時間を推測せず、実際の完了につなげます。

待機しない場合は後続メソッドがキューを使うか、同じ要素・キュー名を操作しているかを調べます。表示されない場合は対象の存在と選択結果、独自キューの開始、Networkでの全体版jQueryの読み込み、Consoleのエラーを確認します。