JavaScript Academy · レッスン

デバウンスとスロットル — 自作する

小さなデバウンスとスロットルのユーティリティを作ります。末尾実行・先頭実行のバリエーションを練習し、使い分けを学びます。

「デバウンスとスロットル — 自作する」はCoddyKit上の無料JavaScript Academyレッスンです。これはレッスン2/3です。下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。これはJavaScript Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 JavaScript Academyコースには全3レッスンが含まれています。

概要

目標：頻繁に発生するイベントを制御します。

デバウンス：処理が落ち着くまで待ってから1回実行します
スロットル：1つの間隔につき最大1回実行します
leadingとtrailingの呼び出し
小さく読みやすいヘルパー

デバウンス（trailing）

trailingデバウンスはイベントごとにタイマーをリセットし、状況が落ち着いたときに1回だけ実行します。

// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
  let t = null;
  return function (...args) {
    clearTimeout(t);
    t = setTimeout(function () {
      fn.apply(null, args);
    }, wait);
  };
}

// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
  console.log("debounced:", msg);
}, 10);

for (let i = 0; i < 5; i++) {
  setTimeout(function () {
    debouncedLog("final after bursts");
  }, i * 3);
}

デバウンス（leading）

leadingデバウンスはすぐに実行し、その後、静止期間が終わるまで繰り返しの実行を止めます。

// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
  let t = null;
  return function (...args) {
    if (t === null) {
      fn.apply(null, args);
    }
    clearTimeout(t);
    t = setTimeout(function () {
      t = null;
    }, wait);
  };
}

// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
  console.log("leading:", x);
}, 12);

for (let i = 0; i < 4; i++) {
  setTimeout(function () {
    firstTap("first-then-wait");
  }, i * 3);
}

スロットル（leading）

スロットルは一定の時間枠につき1回だけ呼び出せるように制限し、余分な呼び出しを破棄します。

// Throttle (leading): at most once per interval
function throttle(fn, wait) {
  let last = 0;
  return function (...args) {
    const now = Date.now();
    if (now - last >= wait) {
      last = now;
      fn.apply(null, args);
    }
  };
}

// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
  console.log("throttled:", n);
}, 10);

for (let i = 0; i < 10; i++) {
  setTimeout(function () {
    throttled(i);
  }, i * 2);
}

スロットル（trailing）

trailingスロットルを使うと、時間枠の最後に最新の値も確実に取得できます。

// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
  let last = 0;
  let timer = null;
  let queuedArgs = null;

  function invoke(args) {
    last = Date.now();
    fn.apply(null, args);
  }

  return function (...args) {
    const now = Date.now();
    const remaining = wait - (now - last);

    if (remaining <= 0) {
      // Window passed: run now
      clearTimeout(timer);
      timer = null;
      queuedArgs = null;
      invoke(args);
    } else {
      // Queue the latest args to run at the end of the window
      queuedArgs = args;
      clearTimeout(timer);
      timer = setTimeout(function () {
        timer = null;
        if (queuedArgs) {
          invoke(queuedArgs);
          queuedArgs = null;
        }
      }, remaining);
    }
  };
}

// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
  console.log("trail:", x);
}, 10);

for (let i = 0; i < 6; i++) {
  setTimeout(function () {
    trail("v" + i);
  }, i * 3);
}

どちらを使うべきか

選び方：

デバウンス：入力中の検索やサイズ変更など、ユーザーが操作を終えた後に実行する場合に使います。
スロットル：スクロールやドラッグなど、呼び出しを一定のペースに制限する場合に使います。
すぐに反応させるならleading、最後の値を取得するならtrailingを使います。

デバウンスとスロットルのクイズ

簡単な確認：時間枠ごとの呼び出し制限です。

まとめ

まとめ：trailingとleadingのデバウンス、シンプルなleadingスロットル、軽量なtrailingスロットルを作成しました。「ユーザーが操作を終えた後」ならデバウンス、「一定のペース」ならスロットルを選びます。

よくある質問

「デバウンスとスロットル — 自作する」レッスンは無料ですか？

はい。「デバウンスとスロットル — 自作する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、JavaScript Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 JavaScript Academyコースには全3レッスンが含まれています。

「デバウンスとスロットル — 自作する」で何を学びますか？

小さなデバウンスとスロットルのユーティリティを作ります。末尾実行・先頭実行のバリエーションを練習し、使い分けを学びます。ブラウザで直接実行するハンズオンコードでJavaScript Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

JavaScript Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのJavaScript Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。これはレッスン2/3です。

「デバウンスとスロットル — 自作する」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このJavaScript Academyレッスンでコードを書いて実行できますか？

はい。すべてのJavaScript Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

← JavaScript Academyに戻る