函數防抖和節(jié)流都是對高頻動作觸發(fā)回調函數的一個優(yōu)化，實現方式上有類似之處。先從使用場景做個區(qū)分。

防抖使用場景：

• 表單輸入框校驗
• 提交按鈕避免重復提交
  

節(jié)流使用場景：

• scroll,mousemove,resize等
  

函數防抖（debounce）

表單輸入框校驗在用戶不停的打字輸入時并不需要向后臺校驗文本，只有當用戶停下來一定時間后，這時候默認用戶已經輸入完畢了可以開始向后臺提交文本了。

表單的提交按鈕被用戶多次連續(xù)點擊時，顯然并不需要每次點擊都提交表單。僅在用戶不點擊之后，把最后一次的點擊操作執(zhí)行即可。

防抖函數的適用場景都有一個共同特點，就是高頻觸發(fā)并不會立即高頻的執(zhí)行，只有在結束高頻觸發(fā)一定時間間隔之后，執(zhí)行最后一次觸發(fā)。

代碼實現就很簡單了，短時間高頻觸發(fā)則重置計時器，計時器到達指定時間后，方才執(zhí)行回調函數

var debounce = function (func, wait) {
  var timer;
  return function () {
    var self = this, args = arguments;
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      func.apply(self, args);
    }, wait);
  }
}
/**
這里使用閉包是為了保存計時器，而不是定義一個全局變量來存放計時器。apply的作用則是為了處理this指向和參數的傳遞，因為setTimeout會將this指向window。
*/

函數節(jié)流（throttle）

在觸發(fā)頻率很高的場景中，通常并不需要以同樣的高頻來執(zhí)行回調函數，這時候需要人為的控制回調函數執(zhí)行頻率，以一個固定的較低頻率來執(zhí)行。

實現原理是，記錄第一次觸發(fā)時間，之后每次觸發(fā)都對比是否到達指定的間隔時間，只有大于等于指定間隔才會再次執(zhí)行，并重新開始記錄觸發(fā)時間。

可以用時間戳記錄并計算出時間間隔，同樣也可以用計時器來控制時間間隔。

var throttle = function (func, wait) {
  var timer;
  return function () {
    var self = this, args = arguments;
    if (!timer) {
      timer = setTimeout(function () {
        func.apply(self, args)
        clearTimeout(timer)
        timer = null;
      }, wait)
    }
  }
}

最后用一張圖來對比防抖和節(jié)流函數的執(zhí)行的頻率,可視化實現

以上就是淺析JavaScript 函數防抖和節(jié)流的詳細內容，更多關于JavaScript 函數防抖和節(jié)流的資料請關注腳本之家其它相關文章！

最新評論