手ブレや節流を防ぎます.

手振れ防止(debounce)
概念
イベントは、単位時間を経過した後、コールバックを実行します.単位時間内にトリガされた場合、再カウントします.
手振れ防止関数

const debounce = (cb, delay = 1000) => {
  let timer = null;
  return function (...args) {
    const context = this;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      cb.apply(context, args);
      timer = null;
    }, delay);
  }
}

ディレイdelayが1000(デフォルト値)に設定されると、cb(コールバック関数)はトリガ1 sを停止した後だけ実行され、常にトリガが発生している場合は、コールバック関数は常に実行されません.
使用
以下は簡単な使用例であり、後述する手ぶれ防止関数と節流関数の使用方法も同様である.

const callback = () => {      
  console.log(Math.random());
}
const handle = debounce(callback, 1000);
window.addEventListener('scroll', handle);

手振れ防止関数(最初のトリガはすぐ実行されます.)

const debounceImmediate = (cb, delay = 1000, immediate = true) => {
  let timer = null;
  return function (...args) {
    const context = this;
    const execNow = immediate && !timer;
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      cb.apply(context, args);
      timer = null;
    }, delay);
    execNow && cb.apply(this, args);
  }
}

immediate=true(標準値)、delay=1000(標準値)を設定すると、最初のトリガはすぐにコールバック関数を実行します.後続の実行は通常の手振れ防止関数と同様に、停止トリガ1 s後のコールバック関数だけが実行されます.まだ継続的にトリガされている場合、コールバック関数は常に実行されません.
スロットル
概念
単位時間(delay)内に規定されていますが、一次関数だけがトリガされます.単位時間内に何度か関数をトリガすると、一回だけコールバックが実行されます.
スロットル関数(タイムスタンプを使う)

const throttleUseTimeStamp = (cb, delay = 1000) => {
  let startTime = Date.now();  
　return function(...args) {      
　　const context = this;                        
　　const now = Date.now();           
　　if (now - startTime >= delay) {
      cb.apply(context, args);
      startTime = Date.now();        
　　}
　} 
}

delay=1000であれば、1 s以内に一回のコールバック関数しか実行されません.
スロットル関数の実装(タイマーを使用)

const throttleUseTimer = (cb, delay) => {
  let timer = null;
  return function(...args) {
    const context = this;
    if (!timer) {
      timer = setTimeout(() => {
        cb.apply(context, args);      
        timer = null;      
      }, delay);  
    } 
  }
}

delay=1000であれば、1 s以内に一回のコールバック関数しか実行されません.
スロットル関数の実装(最初のトリガは直ちに実行され、最後のトリガも実行されます.)

const throttleExecMore = function(cb, delay) {
  let timer = null; 
  let startTime = Date.now();
  return function(...args) {        
    const curTime = Date.now(); 
    const remaining = delay - (curTime - startTime); 
    const context = this;           
    timer && clearTimeout(timer);
    if (remaining <= 0) {
      //                       
      cb.apply(context, args);              
      startTime = Date.now();         
    } else {
      //                        
      timer = setTimeout(() => {
        cb.apply(context, args);
        timer = null;
      }, remaining);          
    }
  }
}

最初のトリガはすぐにコールバック関数を実行します.最後のトリガは一回のコールバック関数も実行します.
実体験
前述した5つの手ぶれ防止関数と節流関数をそれぞれ5つの入力ボックスのオンChangeイベントの傍受に適用し、delay値は1000に統一され、クイック入力1111は以下のような結果を得た.
手ぶれ・節流制御をしないと、結果は次のようになります.

1
11
111
1111

4回のコールバック関数をトリガしました.
手ぶれや節流を体験します.http://47.92.166.108:3000/blog/index.html#/tutorials/throttle-and-debounce)
ウェブサイトのQRコードを体験する:
アプリケーションの例
振れを防ぐ

連想を検索し、値を入力し続ける間は要求リソースを節約する.

ウィンドウresizeイベント

流れをよくする

マウスは絶えずクリックして、単位時間内に一回だけ触発します.

最後までスクロールします.もっと多くの

をロードします.