JavaScript のデバウンス関数とスロットル関数を理解する

デバウンス機能

デバウンス関数は、最後にイベントがトリガーされてから一定時間が経過するまで関数の実行を遅らせます。イベントが頻繁にトリガーされる場合、関数の実行は延期され、イベントのトリガーに一時停止がある場合にのみ関数が実行されます。

デバウンス機能の応用シナリオ:

検索や送信操作など、頻繁にユーザーが入力する入力フィールド。
ボタンを頻繁にクリックすると、特定のアクションがトリガーされます。
特定の操作のために Web ページ上のスクロールイベントをリッスンします。
ブラウザのサイズ変更イベントをより効率的に処理します。

デバウンス関数の例:

function myDebounce(fn, delay) {
  let timer = null;

  const debounceFn = function() {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };

  return debounceFn;
}

// Usage example:
const inputEl = document.querySelector("input");
let count = 0;

const inputChange = function() {
  count++;
  console.log("Sending network request", count, this.value);
};

// Implement debounce
inputEl.oninput = myDebounce(inputChange, 1000);

スロットル機能

スロットル機能は一定の間隔で機能を実行します。これにより、間隔内でイベントが何回トリガーされたかに関係なく、その間隔内で関数が 1 回だけ実行されることが保証されます。

スロットル機能の応用シナリオ:

ボタンのクリックなど、頻繁なユーザー操作を処理する場合の関数の実行を制限します。
マウスの移動またはスクロールに関連するイベントを制御された方法で処理します。

スロットル機能の例:

function myThrottle(fn, interval) {
  let lastTime = 0;

  const throttleFn = function() {
    const nowTime = new Date().getTime();
    const waitTime = interval - (nowTime - lastTime);

    if (waitTime <= 0) {
      fn.apply(this, arguments);
      lastTime = nowTime;
    }
  };

  return throttleFn;
}

// Usage example:
const buttonEl = document.querySelector("button");
let count = 0;

const throttleFn = function(event) {
  count++;
  console.log("Response count", count, this, event);
};

// Implement throttle
buttonEl.onclick = myThrottle(throttleFn, 1000);

デバウンスおよびスロットル機能の最適化

バインディングthisコンテキストthis:デバウンスまたはスロットルされた関数内で正しいコンテキストを確保するには、元の関数を呼び出すときにapplyまたはを使用します。call
追加の引数を渡す: デバウンス関数またはスロットル関数に追加の引数を渡すには、argumentsオブジェクトを拡散するか、元の関数の呼び出し時に直接渡します。
即時 (初回) 実行: 最初のイベントで関数をすぐに実行するには、immediateデバウンス関数またはスロットル関数で追加パラメーター (例: ) を使用します。immediateの場合true、関数は最初のイベントですぐに実行されます。

これらのデバウンス機能とスロットル機能は、特に頻繁なユーザー操作を処理し、不要な関数呼び出しを減らす場合に、パフォーマンスを最適化し、さまざまなシナリオでユーザーエクスペリエンスを向上させるのに役立ちます。