[JavaScript]10Debouncing & Throttling

6829 ワード
TIL JavaScript テキストリンク
Javascriptコードを記述する場合、EventListenerを使用してコードを記述することがよくありますが、検索やスクロール時に要求の数が大幅に増加することが多いです.
この場合に適用される技法はDebouncingとThrottlingである.
概念説明の前の文書には、以下のDOM要素が存在する.
<input id="search" />
なお、EventListenerは、以下のようにして使用することができる.
document.querySelector('#search').addEventListener("input", (e) => {
  console.log("검색 요청", e.target.value);
})
このようにコードを記述すると、大量のクエリーが発生し、コストが増加します.

Debouncing


連続呼び出しの関数では、最後の関数または最初の関数のみが呼び出されます.
タイプするたびにタイマーを設定し、しばらく入力がなければ入力終了とします.
一定時間(ここでは300ミリ秒)前にタイピング入力が発生した場合、以前のタイマーをキャンセルし、新しいタイマーを設定します.
let timer;

document.querySelector('#search').addEventListener("input", (e) => {
  if(timer) clearTimeout(timer);
  timer = setTimeout(function() {
    console.log("검색 요청(Debounce) : ", e.target.value)
  }, 300);
})

Throttling


パケットの解除と同様ですが、入力期間中にも以前に要求されたタスクが定期的に実行されます.
最後の関数が呼び出されてからしばらくの間、再呼び出されないことを確認します.
タイマーが設定されている場合は何もしません.タイマーがない場合はタイマーを設定します.
タイマーは一定時間後に自分を解放し、要求を発行します.
let timer;

document.querySelector("#search").addEventListener("input", (e) => {
  if (!timer) {
    timer = setTimeout(() => {
      timer = null;
      console.log("검색 요청(Throttling) : ", e.target.value);
    }, 300);
  }
})

参考資料:Zeroch-ThrotlingとDebounsing
Masasasyon Boguデビッグ・アンセン0 .パイ
イオン6.1:改良仮想スクロール互換性