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 的方式，在一定的時間間隔內，將多次觸發變成一次觸發。

二、速識節流：

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

   <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>

關于“JS防抖與節流的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。