デバウンスとスロットルの違いは何ですか？

Question

Accepted Answer

どちらも、急速に繰り返されるイベントに応じて関数が実行される頻度を制限しますが、タイミングの戦略が異なります。

- **デバウンス（Debounce）**: アクティビティが N ミリ秒**停止した後**にのみ関数を実行する。呼び出しのたびにタイマーをリセットする。→「ユーザーが終わるまで待つ」。
- **スロットル（Throttle）**: 連続的なアクティビティの間、**N ミリ秒ごとに最大1回**だけ関数を実行する。→「一定のペースで実行する」。

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## デバウンスの実装

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## スロットルの実装

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## どちらをいつ使うか

- **デバウンス**: 入力に応じた検索（search-as-you-type）、自動保存、リサイズ終了、ユーザーが入力をやめた後のバリデーション — *最終的な*値が欲しい場合。
- **スロットル**: スクロールハンドラ、mousemove、ドラッグ、レート制限 — 操作が続いている間に*定期的な*更新が欲しい場合。

## なぜ重要なのか

どちらも、高コストな処理（API 呼び出し、レイアウトの再計算）が毎秒何百回も発火するのを防ぎます。これはフロントエンドの重要なパフォーマンス手法です。

lodash のようなライブラリは、leading/trailing オプションを備えた堅牢な実装を提供しています。