JavaScript を使用する場合、過剰なイベント トリガーによりアプリケーションの速度が低下する可能性があります。たとえば、ユーザーがブラウザ ウィンドウのサイズを変更したり、検索バーに入力したりすると、イベントが短期間に繰り返し発生し、アプリのパフォーマンスに影響を与える可能性があります。

ここで、スロットルとデバウンスが役に立ちます。これらは、頻繁に発生するイベントを処理するときに関数が呼び出される頻度を管理するのに役立ちます。

?スロットリングとは何ですか?

スロットリングにより、関数を実行できる頻度が制限されます。イベントが繰り返し発生した場合でも、調整された関数は指定された時間間隔ごとに最大 1 回しか実行されません。

例：

コンサートに行って写真を撮っているところを想像してみてください。ただし、(パフォーマンスがどんなに盛り上がっていても) 写真を撮るのは 5 分に 1 枚だけと決めます。それはスロットルのようなものです。写真にふさわしい瞬間がどれだけ起こっても、5 分に 1 枚の写真を撮るというルールを守ります。

JavaScript では、これは、ユーザーがページを下にスクロールする頻度を追跡したいが、関数をミリ秒ごとにトリガーしたくない場合に適用できます。スロットルを使用すると、その関数が実行される頻度を制御できます。

コード例:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

この例では、ユーザーがスクロールする速度や頻度に関係なく、handleScroll 関数は 2 秒 (2000 ミリ秒) に 1 回だけ実行されます。

?デバウンスとは何ですか?

デバウンスにより、一定期間非アクティブな状態が続いた場合にのみ関数が呼び出されるようになります。イベントが発生し続ける場合、関数はタイマーをリセットし続け、イベントが停止した後にのみトリガーされます。

例：

グループ チャットに参加していて、メッセージを入力していると想像してください。キーを押すたびに友達に通知を送信したくないでしょう。代わりに、入力を停止するまで数秒待ってから、「入力中...」通知を送信します。これはデバウンスです。入力を一時停止した後にのみ通知を送信します。

JavaScript では、ユーザーが検索ボックスに入力するときにデバウンスがよく使用されます。キーストロークのたびに検索クエリを送信する代わりに、ユーザーが入力をやめるまでしばらく待ってから検索を実行できます。

コード例:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

この例では、handleInput 関数は、ユーザーが 500 ミリ秒間入力を停止した後にのみ実行されます。

?スロットリングまたはデバウンスをいつ使用するか?

⚡️ 時間の経過とともに関数が呼び出される頻度を制御したい場合は、スロットルを使用します。次のようなイベントに適しています:

=> スクロール
=> ウィンドウのサイズを変更する
=> マウスの動き

⚡️ イベントの起動が終了した後にのみ関数が呼び出されるようにしたい場合は、デバウンスを使用します。次のようなイベントに適しています:

=> 検索バーに入力
=> フォーム送信
=> ウィンドウのサイズ変更（レイアウト調整など）

結論✅

スロットリングとデバウンスは、JavaScript アプリケーションのパフォーマンスと応答性を向上させるための優れたテクニックです。

これらは、関数が実行される頻度を管理するのに役立ち、アプリが多すぎるイベントによって圧倒されるのを防ぎます。

いつどのように使用するかを理解することで、最も負荷の高いアプリでもコードをスムーズに実行し続けることができます。

ハッピーコーディング! ?