JavaScriptでのデバウンスとスロットリングの違い – JavaScriptで始めるプログラミング

JavaScriptでのデバウンスとスロットリングの違い – JavaScriptで始めるプログラミング

JavaScriptの開発において、パフォーマンス改善のためにデバウンスとスロットリングという技法があります。これらは似ているようで異なる機能を持っており、それぞれに応じた適切な使用方法があります。この記事では、デバウンスとスロットリングの違いについて詳しく説明します。

デバウンスとは

デバウンスは、特定のアクションが短時間に何度も呼び出されるのを防ぐために使用されます。具体的には、一定期間アクションが発生しなかった場合にのみ関数を実行します。

    function debounce(func, wait) {
  let timeout;
  return function(...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), wait);
  };
}

このデバウンス関数は、特定のイベントが連続して発生する間は処理を遅延させ、イベントの発生が止まって一定時間が過ぎた後に初めて処理を実行します。例えば、ユーザーが入力フィールドにタイプする際にオートコンプリート機能を実装する場合に有効です。

スロットリングとは

スロットリングは、一定期間に一度だけ関数を実行するようにする技法です。これはブラウザのリソースを消費する高頻度のイベント（例えばスクロールイベントなど）を効率的に処理するために使われます。

    function throttle(func, limit) {
  let lastFunc;
  let lastRan;
  return function(...args) {
   if (!lastRan) {
     func.apply(this, args);
     lastRan = Date.now();
   } else {
     clearTimeout(lastFunc);
     lastFunc = setTimeout(function() {
       if (Date.now() - lastRan >= limit) {
         func.apply(this, args);
         lastRan = Date.now();
       }
     }, limit - (Date.now() - lastRan));
   }
  };
}

このスロットル関数は、関数の実行頻度を制限します。例えば、ウィンドウのリサイズイベントやページスクロールイベントで過度な再描画を防ぐために使用します。

デバウンスとスロットリングの使い分け

両者の違いを理解することで、適切な場面で使い分けが可能になります。

  • デバウンス：ユーザーのアクションが止まった後に一度だけ処理を行いたい場合に適している。
  • スロットリング：高頻度のイベントを制御し、一定間隔で処理を行いたい場合に適している。

コメントを残す