JSのスロットルとアンチシェイクを完全に理解する

まず、スロットリングとアンチシェイクは、onscrollイベントなどのイベントを継続的にトリガーするために使用されます。スロットリングとアンチシェイクを設定しない場合、onscrollイベントをバインドしてイベント処理関数を設定すると、スクロールホイールをスライドしたときにn以上実行されます。 2番目のイベント処理機能により、パフォーマンスが低下します。入力キーダウンイベントには、スロットルとアンチシェイクが適用される場合があります。特定の状況に応じて、スロットルまたはアンチシェイクを選択してください。

スロットルとアンチシェイクの概念について簡単に説明します。

• スロットリング：イベントをトリガーし続けるとき、定期的に実行するコードを実行します。（イベントの頻繁なトリガーを防ぎ、コードをn回実行するため）

• アンチシェイク：イベント処理機能は、トリガーイベントが停止した後、一定時間内にイベントがトリガーされない場合にのみ実行されます。（つまり、イベントをトリガーし続けると、最後のコードのみが実行されます）
  （イベントが一定の時間内に再度トリガーされると、時間が再計算されます）。

• コードを調整する

   var flag = true   //节流阀默认为true

   window.onscroll = function () {
    
         //触发事件后代码执行第一次
     if (flag === false) return     // 节流阀闭合则不执行

     flag = false // 来到这里即开关打开状态，现在关掉开关以免重复执行

     console.log('执行一次')
     setTimeout(() => {
    
      //为防止频繁触发，用延迟器来设置时间间隔
       flag = true     //0.5秒后打开开关
     }, 500)  //若事件被极频繁触发，也能保证至少等待0.5秒再执行下一次
										         //的事件处理函数
   }

• ぶれ防止コード

    var timer = null    //准备一个timer变量来操作定时器
    
    window.onscroll = function () {
    
      
      clearInterval(timer)   //触发事件就清除掉已有定时器
      					//保证了一定时间间隔内只执行一次事件处理函数
						//而这个时间间隔就是下边延时器的500ms
      timer = setTimeout(() => {
    
       //设置延时器
        console.log('触发')    
      }, 500)          //0.5秒内不触发该事件，则执行一次延时器内代码
    }