Web 開発におけるスロットルとデバウンス

スクロール、サイズ変更、入力などのイベントにより、関数が繰り返しトリガーされることが多く、場合によっては数秒以内に何百回もトリガーされます。ユーザーが入力すると検索バーがサーバーから候補を取得したり、ブラウザー ウィンドウの変化に応じてサイズ変更ハンドラーが常にレイアウトを調整したりすることを想像してください。これらの関数を制御しないと、ブラウザに過負荷がかかり、ユーザー エクスペリエンスが低下し、過剰な API リクエストによりサーバー コストが増加する可能性もあります。

ここでスロットルとデバウンスが関係します。これら 2 つの手法は、頻繁なイベントに応じて関数が実行される頻度を管理するのに役立ち、アプリケーションをよりスムーズ、効率的、応答性にします。このガイドでは、これらの概念を検討し、その違いを調べ、特定の使用例でそれぞれがどのようにパフォーマンスを最適化できるかを見ていきます。

スロットリングとデバウンスについて

スロットリングは、トリガーとなるイベントが発生する頻度に関係なく、関数の実行に制御された一定の間隔を強制する手法です。スロットリングにより、指定された期間の呼び出しを制限することで、イベントが発生するたびに関数が呼び出されるのではなく、関数が予測どおりに (安定して一貫して) 呼び出されるようになります。これは、システムに負荷をかけることなく、定期的に関数を実行することでユーザー エクスペリエンスを向上させる場合に最適です。

一方、デバウンスは、イベントをさらにトリガーすることなく、設定された期間が経過するまで関数の実行を遅らせます。基本的に、関数を呼び出す前にアクティビティの「一時停止」を待機するため、ユーザーのアクティビティが静まった後にのみアクションを実行する必要がある状況で役立ちます。たとえば、ユーザーが入力を完了するまで待ってから検索フィールドで API 呼び出しを行うと、不必要なリクエストが防止され、パフォーマンスが最適化されます。

主な特徴

スロットリングの主な特徴

• 実行頻度: スロットリングにより最大実行速度が強制されます。たとえば、ウィンドウのサイズ変更など、イベントが継続的にトリガーされる場合、スロットリングにより、関数は定義された間隔ごとに 1 回だけ実行されるようになります。

• 一貫したレート: この手法は、安定した制御された実行ペースを維持し、圧倒的な数の関数呼び出しを回避し、関数の動作の予測可能性を可能にします。

デバウンスの主な特徴

• 遅延ベースの実行: 関数は最後のイベントから一定の遅延が経過した後にのみ実行され、過剰な実行を回避できます。

• イベント停止後の単一実行: イベントが継続する場合、関数呼び出しは繰り返し遅延され、アクティビティが停止した場合にのみ実行されます。ユーザーが入力などのアクションを完了した後にのみアクションを実行する必要がある入力に最適です。

スロットリングとデバウンスの使用例

これらのテクニックは、次のような異なるシナリオで威力を発揮します。

• スロットリングの使用例:

  • スクロール イベント: スロットリングは、次のイベントによってトリガーされるアクションに対して有効です。 コンテンツの読み込みなど、予想通りに発生する可能性のあるスクロール インターフェースを圧迫することなく継続的に実行できます。
  • サイズ変更イベント: ウィンドウのサイズ変更によってトリガーされる頻繁な呼び出しは、 スロットルによって制御され、間隔を置いて調整が可能 サイズ変更ごとに行うのではなく、

• デバウンスの使用例:

  • 検索入力: 検索フィールドの場合、デバウンスにより不要な入力が防止されます。 API リクエストは、ユーザーが入力をやめるまで待機することによってのみ行われます。 非アクティブな期間が経過した後に実行されます。
  • サイズ変更イベント: スロットリングと同様に、サイズ変更イベントのデバウンスは、 レイアウト調整が後で 1 回だけ行われるようにするのに役立ちます。 サイズ変更が終了しました。

実践例

JavaScript でのスロットリング
関数の実行頻度を制限するためにスロットリングを実装する方法は次のとおりです:

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

const throttledScrollHandler = throttle(() => {
  console.log("Handling scroll event...");
}, 1000);

window.addEventListener("scroll", throttledScrollHandler);

この例では、ユーザーが素早くスクロールした場合でも、スロットル関数によって throttledScrollHandler が 1000 ミリ秒 (1 秒) ごとに 1 回だけ呼び出されることが保証されます。これにより、システム リソースが節約され、ユーザー エクスペリエンスがスムーズになります。

JavaScript でのデバウンス
デバウンスの場合、イベントが停止するまで関数の実行を遅らせる方法は次のとおりです。

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

const debouncedSearch = debounce((query) => {
  console.log(`Searching for: ${query}`);
}, 300);

const searchInput = document.getElementById("search-input");
searchInput.addEventListener("input", (event) => {
  debouncedSearch(event.target.value);
});

この場合、debouncedSearch 関数は入力が停止してから 300 ミリ秒後にのみ実行されます。キーストロークごとに遅延タイマーがリセットされるため、関数はユーザーの入力が完了するまで待機し、パフォーマンスとユーザー エクスペリエンスの両方を最適化します。

結論

スロットルとデバウンスは、高頻度イベントを最適化するための重要な技術であり、よりスムーズなユーザー エクスペリエンスと効率的なリソースの使用につながります。これらのテクニックを理解し、思慮深く適用することで、開発者は関数の実行速度を制御し、フロントエンドのパフォーマンスとシステムの応答性の両方を向上させることができます。

React、TypeScript、最新の Web 開発実践についてさらに詳しく知りたい場合は、私をフォローしてください!?‍?

以上がWeb 開発におけるスロットルとデバウンスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。