JS でのデバウンス: より優れた Web アプリの構築-jsチュートリアル-php.cn

JS でのデバウンス: より優れた Web アプリの構築

Susan Sarandon

リリース： 2024-12-06 19:56:11

オリジナル

321 人が閲覧しました

Debouncing in JS: Building better web apps

Web サイトにアクセスし、検索バーに入力したときに、遅延を引き起こすことなくリアルタイムで候補がポップアップ表示されることに気づいたことがありますか?あるいは、フォームに記入し、入力しているときに「ユーザー名はすでに使用されています」というメッセージが表示されたことがあるかもしれません。これらのシームレスなエクスペリエンスの背後には、現代の Web 開発の隠れた強力なヒーロー、デバウンス があります。

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

デバウンシングは、指定した非アクティブ期間が経過した後にのみ関数が実行されるようにするプログラミング手法です。検索バーに入力しているところを想像してください。デバウンスを行わないと、キーストロークごとに関数呼び出しがトリガーされ、冗長なリクエストでシステムに負荷がかかる可能性があります。デバウンスは、関数を実行する前に入力の一時停止を待ち、リクエストが 1 つだけ送信されるようにすることでこの問題を解決します。

どのように機能するのでしょうか?

その核心は、関数の実行頻度を制御することです。しかし、理解を容易にするために、ドアベルの例を見てみましょう。 3 秒間何も操作しないとドアビールが鳴るとします。最初のベルが鳴った後、ユーザーが何度でもベルを鳴らそうとした場合、さらに 3 秒経過しない限りベルは鳴りません。

JavaScript では、デバウンスは通常、入力、スクロール、サイズ変更などのイベントリスナーで使用されます。基本的な実装は次のとおりです:

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

ログイン後にコピー

このコードのさまざまな要素を理解してみましょう:

debounce: 指定された関数のデバウンスされたバージョンを作成して返すメイン関数。
callback: デバウンスされた遅延の後に実行される関数。
遅延: 最後のイベントの後、コールバックを実行する前に関数が待機する時間 (ミリ秒単位)。
timeoutId は、setTimeout によって作成されたタイマーの識別子を保持するために定義されます。これにより、新しいタイマーを開始する前に進行中のタイマーをクリアして、不要な関数の実行や繰り返しの関数の実行を防ぐことができます。
clearTimeout は、timeoutId に関連付けられている既存のタイマーをキャンセルします。

実際の使用例

検索入力フィールド: ライブ検索は、デバウンスの古典的な使用例です。これがないと、キーストロークごとにデータベースクエリがトリガーされ、サーバーに負荷がかかる可能性があります。デバウンスを使用すると、ユーザーが入力をやめた後にのみ関数が呼び出されるため、サーバーの負荷が軽減され、パフォーマンスが向上します。

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

ログイン後にコピー

フォームの検証: フォームに対する即時フィードバックは優れていますが、キーストロークごとに入力を検証するとリソースが大量に消費される可能性があります。デバウンスを使用すると、ユーザーが入力を停止するまで検証を遅らせることができます。

const handleSearch = debounce((query) => {
  fetch(`https://api.example.com/search?q=${query}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}, 500);

document.getElementById("search").addEventListener("input", (e) => {
  handleSearch(e.target.value);
});

ログイン後にコピー