面試必問題：JS防抖與節流

摘要：防抖與節流可謂是面試常見，其實很好理解，下面帶你分分鐘瞭解防抖與節流的基本思想與寫法~

本文分享自華為雲社群《JS防抖與節流快速瞭解與應用》，作者：北極光之夜。。

一.速識防抖：

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

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

<!-- 定義一個按鈕 -->
<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 的方式，在一定的時間間隔內，將多次觸發變成一次觸發。節流:就是減少一段時間的觸發頻率。防抖與節流最大的區別就是，無論事件觸發多麼頻繁，都可以保證在規定時間內可以執行一次執行函式。

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

點選關注，第一時間瞭解華為雲新鮮技術~

面試必問題：JS防抖與節流