JS防抖與節流怎么實現

本篇內容主要講解“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防抖與節流怎么實現”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！