怎么理解javascript中防抖和節流

本篇內容介紹了“怎么理解javascript中防抖和節流”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

在javascript中，防抖是指觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間；節流是指當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。

本教程操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

一、防抖

觸發高頻事件后n秒內函數只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間

• 思路：
  動作綁定事件，動作發生后一定時間后觸發事件，在這段時間內，如果該動作又發生，則重新等待一定時間再觸發事件。

function debounce(fn) {
      let timeout = null; // 創建一個標記用來存放定時器的返回值
      return function () {
        clearTimeout(timeout);
         // 每當用戶輸入的時候把前一個 setTimeout clear 掉
        timeout = setTimeout(() => { 
        // 然后又創建一個新的 setTimeout, 這樣就能保證輸入字符后的 interval 間隔內
        // 如果還有字符輸入的話，就不會執行 fn 函數
          fn.apply(this, arguments);
          //因為sayHi函數是在全局中運行，this默認指向了window
          //所以要用apply將inp的this傳入
        }, 500);
      };
    }
    function sayHi() {
      console.log('防抖成功');
    }

    var inp = document.getElementById('inp');
    inp.addEventListener('input', debounce(sayHi)); // 防抖

舉個例子，假如你有一個需求是用戶在input框中輸入一串字符后，自動發一個ajax請求，如果不做防抖，則用戶每次改變字符串(刪掉字符或輸入新字符)都會發送一次請求，但是如果做防抖處理，當用戶輸入一個字符后，過了0.5秒也沒有改變字符串（這大概率表示用戶已經完成字符串輸入），則發送請求，如果在0.5秒內改變了字符串（這大概率表示當前字符串不是用戶要輸入的最終字符串），則暫不發送請求，繼續重新計算0.5秒，直到用戶停頓超過了0.5秒，再發送請求。

二、節流

當持續觸發事件時，保證一定時間段內只調用一次事件處理函數。所以節流會稀釋函數的執行頻率

• 思路：
  動作綁定事件，動作發生后一段時間后觸發事件，在這段時間內，如果動作又發生，則無視該動作，直到事件執行完后，才能重新觸發。

function throttle(fn) {
      let canRun = true; // 通過閉包保存一個標記
      return function () {
        if (!canRun) return; // 在函數開頭判斷標記是否為true，不為true則return
        canRun = false; // 立即設置為false
        setTimeout(() => { // 將外部傳入的函數的執行放在setTimeout中
          fn.apply(this, arguments);
          // 最后在setTimeout執行完畢后再把標記設置為true(關鍵)表示可以執行下一次
          //循環了。當定時器沒有執行的時候標記永遠是false，在開頭被return掉
          canRun = true;
        }, 500);
      };
    }
    function sayHi(e) {
      console.log(e.target.innerWidth, e.target.innerHeight);
    }
    window.addEventListener('resize', throttle(sayHi));

三、結合應用場景

debounce(防抖)

• search搜索聯想，用戶在不斷輸入值時，用防抖來節約請求資源。

• window觸發resize的時候，不斷的調整瀏覽器窗口大小會不斷的觸發這個事件，用防抖來讓其只觸發一次

. throttle(節流)

• 鼠標不斷點擊觸發，mousedown(單位時間內只觸發一次)

• 監聽滾動事件，比如是否滑到底部自動加載更多，用throttle來判斷

“怎么理解javascript中防抖和節流”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！