JS中的節流與防抖函數

導讀

節流函數和防抖函數在平常的開發中仍是有不少地方用到，兩個函數的目的都是爲了控制函數被調用的頻率，今天咱們就來講一說着兩個函數。

例子

input觸發鍵盤輸入事件，將輸入內容發送到後臺：

// 定義一個請求函數
function request(val) {
    console.log("request: " + val);
}

let inputEl = document.getElementById("input");

inputEl.addEventListener("keyup", function (e) {
    request(e.target.value);
});
複製代碼

能夠看到，咱們每次按下鍵盤輸入的時候，都會去請求，這樣很浪費資源，通常應用中都是等待用戶輸入完整的字符，再去請求後臺，因此咱們用防抖函數來優化這一個。

防抖函數

事件被觸發時，在n秒後執行函數，在n秒內屢次觸發事件，則從新開始計時

利用定時器來實現，在n秒內屢次觸發，則先清除定時器，重新計時

// 定義一個請求函數
function request(val) {
    console.log("request: " + val);
}

// 定義一個防抖函數
function debounce(fn, delay) {
    let timeout;
    return function(){
      clearTimeout(timeout)
      timeout = setTimeout(()=>{
        fn.apply(this, arguments)
      },delay)
    }
}

let inputEl = document.getElementById("input");

let debounceInput = debounce(request, 500)

inputEl.addEventListener("keyup", function (e) {
    debounceInput(e.target.value);
});
複製代碼

只有當輸入完成後纔會觸發函數，防止在不停是輸入時調用函數，減小資源的浪費。

節流函數

在規定的單位時間段內，函數只能執行一次，在單位時間內多少觸發，則只有一次有效

定時器來實現

當一個定時器執行，就會生成一個定時器id，當這個id存在就說明在單位時間內函數只執行了一次。

// 定義一個請求函數
function request(val) {
    console.log("request: " + val);
}

// 定義一個節流函數
function throttle(fn, delay) {
    let timer;
    return function(){
      if(!timer) {
        fn.apply(this, arguments)
        timer = setTimeout(()=>{
          clearTimeout(timer)
          timer = null
        },delay)
      }
    }
}

let inputEl = document.getElementById("input");

let throttleInput = throttle(request, 500)

inputEl.addEventListener("keyup", function (e) {
    throttleInput(e.target.value);
});
複製代碼

能夠看到，當咱們在輸入框中不斷輸入，請求函數在咱們規定的單位時間執行一次函數

總結

• 防抖函數和節流函數都是用於控制函數調用頻率，可是二者實現原理不一樣
• 防抖函數是在觸發事件的單位時間後執行一次函數，在單位時間內屢次觸發不執行函數，從新計時
• 節流函數是單位時間內只執行一次函數，屢次觸發也只有一次有效

適用場景

防抖

1. 搜索輸入框搜索內容，用戶在不斷的輸入的時候，用防抖來節約請求資源
2. 不斷的觸發window的resize事件，不斷的改變窗口大小，利用防抖函數來只執行一次

節流

1. 鼠標不斷的點擊，用節流來限制只在規定的單位時間內執行一次函數
2. 滾輪事件, 不斷的往下滾輪，好比滾動到底部加載數據