面試必問題：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防抖與節流