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

防抖使用場景：

• 表單輸入框校驗(yàn)
• 提交按鈕避免重復(fù)提交
  

節(jié)流使用場景：

• scroll,mousemove,resize等
  

函數(shù)防抖（debounce）

表單輸入框校驗(yàn)在用戶不停的打字輸入時(shí)并不需要向后臺(tái)校驗(yàn)文本，只有當(dāng)用戶停下來一定時(shí)間后，這時(shí)候默認(rèn)用戶已經(jīng)輸入完畢了可以開始向后臺(tái)提交文本了。

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

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

代碼實(shí)現(xiàn)就很簡單了，短時(shí)間高頻觸發(fā)則重置計(jì)時(shí)器，計(jì)時(shí)器到達(dá)指定時(shí)間后，方才執(zhí)行回調(diào)函數(shù)

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);
  }
}
/**
這里使用閉包是為了保存計(jì)時(shí)器，而不是定義一個(gè)全局變量來存放計(jì)時(shí)器。apply的作用則是為了處理this指向和參數(shù)的傳遞，因?yàn)閟etTimeout會(huì)將this指向window。
*/

函數(shù)節(jié)流（throttle）

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

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

可以用時(shí)間戳記錄并計(jì)算出時(shí)間間隔，同樣也可以用計(jì)時(shí)器來控制時(shí)間間隔。

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é)流函數(shù)的執(zhí)行的頻率,可視化實(shí)現(xiàn)

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