人類高質量JS防抖與節流機制

一.速識防抖：

??Hello呀，大家好🌈🌈🌈，防抖與節流可謂是面試常見，其實很好理解，下面帶你分分鐘了解防抖與節流的基本思想與寫法~

在這之前，比如我們先定義一個按鈕，并系結一個點擊事件，執行要觸發的事件：

<!-- 定義一個按鈕 -->
<input type="button" id="btn" value="按鈕" />

<script>
// 獲取標簽
  var btn = document.getElementById("btn");
// 系結事件  
  btn.addEventListener("click", real);
// 要觸發的事件
  function real(e) {
    console.log("北極光之夜，");
    console.log(e);
  }
</script>  

執行如下：

??可以發現，一直點擊會一直觸發事件，如果這個事件為發送一個請求，那么這對與服務器來說是很不友好的，同樣的請求因為用戶的多次點擊而多次發送請求，回傳的結果和只點擊一次是一樣的，大大加重服務器壓力和影響性能，所以，我們引入防抖的概念，簡單來說，防抖就是通過setTimeout 的方式，在一定的時間間隔內，將多次觸發變成一次觸發， 直接看下面例子：

1.通過setTimeout的方式延遲執行：

??第一種方式為通過設定setTimeout定時器的方式延遲執行，當快速多次點擊的時候，每一次都會重置定時器，只有你一段時間都不點擊時定時器才能到達條件并執行事件函式，

   <input type="button" id="btn" value="按鈕" />
    <script>
      var btn = document.getElementById("btn");
      // 點擊后觸發trigger()函式，第一個引數為真實要執行的函式，第二個引數為定時器延遲時間
      btn.addEventListener("click", trigger(real, 1000));
      function trigger(fn, delay) {
        // 設定time為定時器，初始為 null
        var time = null;
         // 閉包原理，回傳一個函式
        return function () {
          // 如果定時器存在清空定時器
          if (time) {
            clearTimeout(time);
          }
          // 設定定時器，規定時間后執行真實要執行的函式
          time = setTimeout(() => {
          // 將引數傳遞給真實執行的函式，因為箭頭函式繼承父級作用域，所以直接...arguments
            fn(...arguments);
          }, delay);
        };
      }
      //真實要執行函式
      function real(e) {
        console.log("北極光之夜，");
        console.log(e);
      }
    
   </script>  

??其中會利用閉包的原理形成作用域，使得定時器不會被下一次點擊重復或清空，閉包不清楚的可以看我這篇文章👉：https://auroras.blog.csdn.net/article/details/119520871

運行結果如下，每次點擊都延遲執行，狂點時只有停下后才會執行：

2.通過setTimeout的方式第一次會執行，后面不執行：
?? 可以發現，第一種方式雖然延遲執行了，但是當用戶第一次點的時候也要延遲執行，那就很不友好了，所以下面改進，使得第一次點的時候立即執行，狂點的時候只有第一次有效后面的都沒效：

   <input type="button" id="btn" value="按鈕" />
    <script>
      var btn = document.getElementById("btn");
      // 點擊后觸發trigger()函式，第一個引數為真實要執行的函式，第二個引數為定時器延遲時間
      btn.addEventListener("click", trigger(real, 1000));
     function trigger(fn, delay) {
       // 設定time為定時器，初始為 null
        var time = null;
        return function () {
         //定義一個firstClick，判斷是否第一次執行，初始值為true
          var firstClick = !time;
         //第一次會立即執行
          if (firstClick) {
            fn(...arguments);
          }
           // 如果定時器存在清空定時器
          if (time) {
            clearTimeout(time);
          }
           // 設定定時器，此時firstClick會變為false，規定時間后time才會為null
          time = setTimeout(() => {
            time = null;
          }, delay);
        };
      } 
      //真實要執行函式
      function real(e) {
        console.log("北極光之夜，");
        console.log(e);
      }
    
   </script>  

運行結果如下，第一次點的時候立即執行，狂點的時候只有第一次有效后面的都沒效：

3.通過setTimeout的方式第一次會執行和最后一次執行：

前兩個其實就是防抖的經典例子了，這里是擴展知識，繼續改進上面案例使得只點擊一次的時候立即執行，當點擊多次時第一次和最后一次執行，

   <input type="button" id="btn" value="按鈕" />
    <script>
      var btn = document.getElementById("btn");
      // 點擊后觸發trigger()函式，第一個引數為真實要執行的函式，第二個引數為定時器延遲時間
      btn.addEventListener("click", trigger(real, 1000));
     function trigger(fn, delay) {
       // 設定time為定時器，初始為 null
        var time = null;
        return function () {
         //定義一個firstClick，判斷是否第一次執行，初始值為true
          var firstClick = !time;
         //第一次會立即執行
          if (firstClick) {
            fn(...arguments);
          }
           // 如果定時器存在清空定時器
          if (time) {
            clearTimeout(time);
          }
           // 設定定時器，此時firstClick會變為false，規定時間后time才會為null
          time = setTimeout(() => {
            time = null;
            // 如果firstClick為true，執行
             if (!firstClick) {
              fn(...arguments);
            }
          }, delay);
        };
      } 
      //真實要執行函式
      function real(e) {
        console.log("北極光之夜，");
        console.log(e);
      }
    
   </script>  

運行結果如下，只點擊一次的時候立即執行，當點擊多次時第一次和最后一次執行，：

二.速識節流：

??節流其實就很好理解了，減少一段時間的觸發頻率，簡單來說，就是你一直狂點不停的話，它會每隔一定時間就執行一次，它與防抖最大的區別就是，無論事件觸發多么頻繁，都可以保證在規定時間內可以執行一次執行函式，下面利用計算時間戳實作：

   <input type="button" id="btn" value="按鈕" />
    <script>
      var btn = document.getElementById("btn");
      // 點擊后觸發trigger()函式，第一個引數為真實要執行的函式，第二個引數為限制時間
      btn.addEventListener("click", trigger(real, 500));
     function trigger(fn, delay) {
       // 設定bef，為上一次執行時間，初始為0
        var bef = 0;
        return function () {
        // 獲取當前時間戳
          var now = new Date().getTime();
          //如果當前時間減去上次時間大于限制時間時才執行
          if (now - bef > delay) {
           // 執行函式
            fn(...arguments);
            //執行后，上次時間賦值為這次執行時間
            bef = now;
          }
        };
      }
      //真實要執行函式
      function real(e) {
        console.log("北極光之夜，");
        console.log(e);
      }
    
   </script>  

運行結果如下，一點就運行，狂點不停的話，每隔500毫秒才執行一次，：

也可以用定時器實作節流，如下：

實作第一次點的時候也延遲執行，狂點不停的話，它會每隔一定時間就執行一次，

 <input type="button" id="btn" value="按鈕" />
    <script>
      var btn = document.getElementById("btn");
      btn.addEventListener("click", trigger(real, 500));
      function real(e) {
        console.log("北極光之夜，");
        console.log(e);
      }
      function trigger(fn, delay) {
      // flag為ture
        var flag = true;
        return function () {
         // 如果flag為true執行定時器
          if (flag) {
            setTimeout(() => {
              //到規定時間后執行函式，同時 flag = true;
              fn(...arguments);
              flag = true;
            }, delay);
          }
          // flag = false;防止一直執行
          flag = false;
        };
      }
</script>

效果如下：

三.總結：

??防抖與節流方法多多，不同的需求也會有不同的寫法，重要的是搞清原理就好，防抖就是通過setTimeout 的方式，在一定的時間間隔內，將多次觸發變成一次觸發 ，節流:就是減少一段時間的觸發頻率，防抖與節流最大的區別就是，無論事件觸發多么頻繁，都可以保證在規定時間內可以執行一次執行函式，🌈🌈🌈

??對了，給你們推薦一本好書，我今天剛看完的《秋園》，楊本芬老人的著作，看完久久不能平靜，一本書映射著一個時代，同時也映射著那個時代的人們最純粹，最樸實的酸甜苦辣，

?那么，下次見了~

其它文章：
~關注我看更多簡單創意特效：
文字煙霧效果 html+css+js
環繞倒影加載特效 html+css
氣泡浮動背景特效 html+css
簡約時鐘特效 html+css+js
賽博朋克風格按鈕 html+css
仿網易云官網輪播圖 html+css+js
水波加載影片 html+css
導航欄滾動漸變效果 html+css+js
書本翻頁 html+css
3D立體相冊 html+css
霓虹燈繪畫板效果 html+css+js
記一些css屬性總結（一）
Sass總結筆記
…等等
進我主頁看更多~