JavaScript におけるデバウンスとスロットリング: 関数呼び出しを最適化してパフォーマンスを向上させる

JavaScript におけるデバウンスとスロットリングについて

デバウンスとスロットルは、関数の実行速度を制御するために JavaScript で使用される 2 つの重要なテクニックです。これらの手法は、特にユーザー入力の処理、イベントのスクロール、イベントのサイズ変更などのシナリオで、パフォーマンスを最適化するためによく使用されます。どちらも関数呼び出しの頻度を制限するために使用されますが、動作方法は異なります。

1. デバウンス

デバウンス は、最後のイベントから一定の時間が経過した後にのみ関数が呼び出されるようにします。つまり、ユーザーがテキスト フィールドへの入力やウィンドウのサイズ変更などのアクションの実行を完了するまで、関数の実行が遅延されます。これは、ユーザーが検索バーに入力しているときなど、関数が頻繁に呼び出されないようにする必要があるシナリオで特に役立ちます。

デバウンスの仕組み:

• イベントがトリガーされると、関数呼び出しは指定された時間だけ遅延されます。
• 遅延時間が経過する前にイベントが再度トリガーされると、前の関数呼び出しはキャンセルされ、遅延タイマーがリセットされます。
• この関数は、それ以上のイベントが発生せずに遅延時間が経過した場合にのみ実行されます。

デバウンスの例:

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

この例では:

• debouncedSearch は、別の呼び出しが行われずに 500 ミリ秒が経過した後にのみ searchQuery を呼び出します。
• これにより、文字が入力されるたびに検索関数が呼び出されることがなくなります。

デバウンスの使用例:

• 検索入力: リアルタイムの検索候補を実装する場合。
• ウィンドウのサイズ変更: サイズ変更イベントごとにレイアウトの再計算がトリガーされるのを回避します。
• スクロール イベント: 連続スクロール中に、特に無限スクロール シナリオで関数が起動されないようにします。

2. スロットル

スロットリング では、イベントが何回トリガーされたとしても、関数は指定された間隔ごとに最大 1 回呼び出されます。これは、ユーザーが特定の期間内にウィンドウをスクロールまたはサイズ変更できる回数を制限するなど、関数呼び出しの頻度を制限する場合に便利です。

スロットリングの仕組み:

• この関数は、イベントが初めてトリガーされるとすぐに実行されます。
• その後、イベントがより頻繁にトリガーされる場合でも、イベントは最大でも n ミリ秒ごとに 1 回実行されます。

スロットルの例:

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

この例では:

• throttledScroll は、その間に発生したスクロール イベントの数に関係なく、logScrollEvent が最大で 1 秒に 1 回呼び出されることを保証します。
• 関数は初回のみすぐに実行され、それ以降の呼び出しは間隔を維持するために遅延されます。

スロットルの使用例:

• スクロール イベント: スクロール中に関数が呼び出される頻度を制限します (画像の遅延読み込みなど)。
• サイズ変更イベント: ウィンドウのサイズ変更関数が呼び出される回数を最適化します。
• マウスの動き: マウスの高速移動中の連続実行を防止します。

3. デバウンスとスロットリング: 主な違い

機能

Feature	Debouncing	Throttling
Function Execution	Executes after a delay when events stop	Executes at a fixed interval, no matter how many events occur
Use Case	Ideal for events that occur frequently but should trigger once after some idle time (e.g., input fields, search bars)	Ideal for events that fire continuously (e.g., scroll, resize) but should be limited to a fixed interval
Example Scenario	Search bar input where suggestions are updated only after the user stops typing for a certain period	Scroll events where a function should only run once every few seconds, even if the user scrolls frequently
Execution Frequency	Executes only once after the event stops firing	Executes periodically, based on the interval set
Effectiveness	Prevents unnecessary executions during rapid event firing	Controls the frequency of function executions, even during continuous events

デバウンス中 スロットリング 関数の実行 イベントが停止したときに遅延して実行します イベントの発生数に関係なく、一定の間隔で実行します 使用例 頻繁に発生するが、一定のアイドル時間の後に 1 回トリガーする必要があるイベント (入力フィールド、検索バーなど) に最適です 継続的に発生するイベント (スクロール、サイズ変更など) に最適ですが、一定の間隔に制限する必要があります シナリオ例 ユーザーが一定期間入力を停止した場合にのみ候補が更新される検索バー入力 ユーザーが頻繁にスクロールする場合でも、関数が数秒に 1 回だけ実行される必要があるスクロール イベント 実行頻度 イベントの発生が停止した後に 1 回だけ実行します 設定された間隔に基づいて定期的に実行します 有効性 急速なイベントの起動中に不必要な実行を防止します 連続イベント中であっても、関数の実行頻度を制御します テーブル>

4. 実践例: デバウンスとスロットリングを一緒に使用する

アプリケーションを最適化するために両方の手法が必要な場合は、デバウンスとスロットルを組み合わせることができます。たとえば、検索クエリをデバウンスしながら、スクロール イベントを抑制したい場合があります。

function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

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

const debouncedSearch = debounce(searchQuery, 500);

// Simulating typing events
debouncedSearch("JavaScript");
debouncedSearch("JavaScript debouncing");
debouncedSearch("Debouncing function"); // Only this will be logged after 500ms

この例では:

• スクロール イベントは、1 秒に 1 回だけトリガーされるように調整されます。
• 検索入力はデバウンスされ、非アクティブ状態が 500 ミリ秒続いた後にのみトリガーされます。

結論

• デバウンスは、イベントがトリガーされずに一定時間が経過した後に関数が実行されることを保証し、検索入力やサイズ変更などのシナリオに最適です。
• スロットリングは、特定の時間枠内で関数を実行できる回数を制限するため、スクロールやウィンドウのサイズ変更などのイベントに役立ちます。

どちらの手法も、特にイベントが急速に発生する場合に、パフォーマンスを最適化し、不必要な実行を防ぐのに役立ちます。

---

こんにちは、アバイ・シン・カタヤットです!
私はフロントエンドとバックエンドの両方のテクノロジーの専門知識を持つフルスタック開発者です。私はさまざまなプログラミング言語やフレームワークを使用して、効率的でスケーラブルでユーザーフレンドリーなアプリケーションを構築しています。
ビジネス用メールアドレス kaashshorts28@gmail.com までお気軽にご連絡ください。

以上がJavaScript におけるデバウンスとスロットリング: 関数呼び出しを最適化してパフォーマンスを向上させるの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。