JavaScriptのアンチシェイクとスロットリングとは

/* 手ぶれ防止関数を定義* func: イベントが連続的にトリガーされなくなったときに呼び出される関数を渡す* delay: 渡されたコールバック関数の実行にかかる時間を定義する* */
 関数デバウンス(func,delay) {
  let timer = null // タイマーの保存に使用 return function (...args) {
   // タイマーが存在する場合は、タイマーをクリアしてからリセットします
   if(タイマー !== null) clearTimeout(タイマー)
   timer = setTimeout(func, delay) // 遅延を超えると、ここで func が呼び出され、イベントを受け取ります。必要に応じて、func の this ポインタを変更できます。timer は外部への参照を持っているため、破棄されません。}
 }

 /*イベント処理関数*/
 関数testDeBounce(){
  console.log('何回実行しましたか?')
 }

 // debounce によって返された関数を受け取る const temp = debounce(testDeBounce(),1000)

 /*イベントをバインドし、手ぶれ補正機能をテスト*/
 window.addEventListener('スクロール',()=>{
  温度()
 }); // これはイベント ハンドラを少なくとも 1 回呼び出し、最大で次の回数以上実行されることはありません。window.addEventListener('scroll', testDeBounce); // このように記述すると、ページがスクロールするたびにイベント ハンドラが呼び出されます。

/*
 * タイマースロットル関数を定義します * func: 着信イベント処理関数 * delay: タイマーコールバックは、delay で指定された時間内に無効になります * */
 関数スロットル(func,delay) {
  タイマーを null にする
  const コンテキスト = this
  関数(...引数)を返す{
   // タイマーが存在しない場合は if(!timer){
    タイマー = setTimeout(()=>{
     func.apply(context,args) // 返された関数呼び出しの環境を考慮するため、ここでは直接使用されません
     timer = null // delay 後にタイマーをクリアします},delay)
   }
  }
 }

 関数テスト() {
  console.log('ああああ!')
 }

 定数 temp = スロットル(テスト,1000)

 document.querySelector('button').addEventListener('click',()=>{
  温度()
 })

var スロットル = 関数(func, 遅延) {            
  var prev = Date.now();            
  関数()を返す{                
    var コンテキスト = this;                
    var args = 引数;                
    var now = Date.now();                
    if (現在 - 前回 >= 遅延) {                    
      func.apply(コンテキスト、引数);                    
      prev = Date.now();                
    }            
  }        
}    

関数ハンドル() {            
  コンソールにログ出力します。        
}        

window.addEventListener('スクロール'、スロットル(ハンドル、1000));

// スロットル コード (タイムスタンプ + タイマー):
var スロットル = 関数(func, 遅延) {     
    var タイマー = null;     
    var startTime = Date.now();     
    関数()を返す{             
        var curTime = Date.now();             
        var 残り時間 = 遅延 - (現在時刻 - 開始時刻);             
        var コンテキスト = this;             
        var args = 引数;             
        タイマーをクリアします。              
        残り <= 0 の場合                    
            func.apply(コンテキスト、引数);                    
            開始時刻 = Date.now();              
        } それ以外 {                    
            タイマー = setTimeout(func, 残り時間);              
        }      
    }
}

関数ハンドル() {      
    コンソールにログ出力します。
} 

window.addEventListener('スクロール'、スロットル(ハンドル、1000));