JavaScript の手ぶれ補正とスロットリングの詳細な説明

デバウンス

定義: スクロールイベントなど、短時間に連続してトリガーされるイベントの場合、アンチシェイクとは、イベント処理機能が一定の制限時間内に 1 回だけ実行されることを意味します。

手ぶれ防止については、指でバネを押すことを例に挙げてみましょう。指でバネを押し、押し続けます。指を離すまでバネは跳ね返りません。

サイズ変更の例:

関数デバウンス(fn, wait){
    var タイマー = null;
    戻り値 () =>{
        if(タイマー !== null){
            タイマーをクリアします。
        }
        タイマー = setTimeout(fn, wait);
    }
}
関数ハンドル(){
    コンソールにログ出力します。
}
window.addEventListener("resize",debounce(handle, 1000));

上記は即時実行版ではない

即時実行バージョン

関数デバウンス(fn, wait){
	timeid、flag = true とします。
	戻り値 () => {
		タイムアウトをクリアします(timeid);
		if(フラグ){
			関数fn();
			フラグ = false;
		}それ以外{
			タイムID = setTimeout(()=>{
				フラグ = true;
			}、 待って）;
		}
	}
}

ブラウザウィンドウをドラッグするとサイズ変更がトリガーされますが、この時点ではハンドル関数はトリガーされません。タイマーがカウントを開始します。タイミング時間内にサイズ変更が再度トリガーされると、タイマーが再び開始されます。これの利点は、ブラウザウィンドウをドラッグしてサイズ変更をトリガーすると、ハンドル関数が頻繁に実行されず、必要なときにのみ実行されるため、冗長性が効果的に排除されることです。

一般的な書き方:

const デバウンス = (func, 遅延 = 200) => {
  タイムアウト = null にする
  関数を返す（）{
    clearTimeout(タイムアウト)
    タイムアウト = setTimeout(() => {
      func.apply(これ、引数)
    }、 遅れ）
  }
}

スロットル

定義: 一定期間内にイベントを 1 回だけ実行します。

本来の意図は、蛇口から滴り落ちる水のように、指定された時間内に 1 回だけ実行し、頻繁な繰り返し実行を減らすことです。

検索ボックスの入力イベントなど。

タイムスタンプで計算:

関数スロットル(fn,wait){
  startTime を 0 にします。
  関数()を返す{
    endTime を Date.now() とします。
    if(終了時間-開始時間>待機){
      関数fn();
      開始時間 = 終了時間;
    }
  }
}

タイマー別:

関数スロットル(fn,wait){
  timeid = null とします。
  関数()を返す{
    if(!timeid){
       timeid = setTimeout(関数(){
         関数fn();
         タイムID = null;
       }、待って）
    }
  }
}