Debounce 和 Throttle 的原理及實(shí)現(xiàn)

Benedict Evans 發(fā)布于2019-08-22 18:41 / 2957人閱讀

摘要：和的原理及實(shí)現(xiàn)和均是通過減少實(shí)際邏輯處理過程的執(zhí)行來提高事件處理函數(shù)運(yùn)行性能的手段，并沒有實(shí)質(zhì)上減少事件的觸發(fā)次數(shù)。兩者在概念理解上確實(shí)比較容易令人混淆，強(qiáng)制函數(shù)在某段時(shí)間內(nèi)只執(zhí)行一次，強(qiáng)制函數(shù)以固定的速率執(zhí)行。和等事件與此類似。

throttle和debounce均是通過減少實(shí)際邏輯處理過程的執(zhí)行來提高事件處理函數(shù)運(yùn)行性能的手段，throttle并沒有實(shí)質(zhì)上減少事件的觸發(fā)次數(shù)。兩者在概念理解上確實(shí)比較容易令人混淆，

debounce 強(qiáng)制函數(shù)在某段時(shí)間內(nèi)只執(zhí)行一次，throttle 強(qiáng)制函數(shù)以固定的速率執(zhí)行。在處理一些高頻率觸發(fā)的 DOM 事件的時(shí)候，它們都能極大提高用戶體驗(yàn)。

在處理諸如 resize、scroll、mousemove 和 keydown/keyup/keypress 等事件的時(shí)候，通常我們不希望這些事件太過頻繁地觸發(fā)，尤其是監(jiān)聽程序中涉及到大量的計(jì)算或者有非常耗費(fèi)資源的操作。

有多頻繁呢？以 mousemove 為例，根據(jù) DOM Level 3 的規(guī)定，「如果鼠標(biāo)連續(xù)移動，那么瀏覽器就應(yīng)該觸發(fā)多個連續(xù)的 mousemove 事件」，這意味著瀏覽器會在其內(nèi)部計(jì)時(shí)器允許的情況下，根據(jù)用戶移動鼠標(biāo)的速度來觸發(fā) mousemove 事件。（當(dāng)然了，如果移動鼠標(biāo)的速度足夠快，比如“刷”一下掃過去，瀏覽器是不會觸發(fā)這個事件的）。resize、scroll 和 key* 等事件與此類似。

1.debounce 函數(shù)所做的事情就是，強(qiáng)制一個函數(shù)在某個連續(xù)時(shí)間段內(nèi)只執(zhí)行一次，哪怕它本來會被調(diào)用多次。我們希望在用戶停止某個操作一段時(shí)間之后才執(zhí)行相應(yīng)的監(jiān)聽函數(shù)，而不是在用戶操作的過程當(dāng)中，瀏覽器觸發(fā)多少次事件，就執(zhí)行多少次監(jiān)聽函數(shù)。

function debounce(fn, delay) {

  // 定時(shí)器，用來 setTimeout
  var timer

  // 返回一個函數(shù)，這個函數(shù)會在一個時(shí)間區(qū)間結(jié)束后的 delay 毫秒時(shí)執(zhí)行 fn 函數(shù)
  return function () {

    // 保存函數(shù)調(diào)用時(shí)的上下文和參數(shù)，傳遞給 fn
    var context = this
    var args = arguments

    // 每次這個返回的函數(shù)被調(diào)用，就清除定時(shí)器，以保證不執(zhí)行 fn
    clearTimeout(timer)

    // 當(dāng)返回的函數(shù)被最后一次調(diào)用后（也就是用戶停止了某個連續(xù)的操作），
    // 再過 delay 毫秒就執(zhí)行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

debounce 返回了一個閉包，這個閉包依然會被連續(xù)頻繁地調(diào)用，但是在閉包內(nèi)部，卻限制了原始函數(shù) fn 的執(zhí)行，強(qiáng)制 fn 只在連續(xù)操作停止后只執(zhí)行一次。

Throttle

throttle 的概念理解起來更容易，就是固定函數(shù)執(zhí)行的速率，即所謂的“節(jié)流”。正常

/**
*
* @param fn {Function}   實(shí)際要執(zhí)行的函數(shù)
* @param delay {Number}  執(zhí)行間隔，單位是毫秒（ms）
*
* @return {Function}     返回一個“節(jié)流”函數(shù)
*/

function throttle(fn, threshhold) {

  // 記錄上次執(zhí)行的時(shí)間
  var last

  // 定時(shí)器
  var timer

  // 默認(rèn)間隔為 250ms
  threshhold || (threshhold = 250)

  // 返回的函數(shù)，每過 threshhold 毫秒就執(zhí)行一次 fn 函數(shù)
  return function () {

    // 保存函數(shù)調(diào)用時(shí)的上下文和參數(shù)，傳遞給 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距離上次執(zhí)行 fn 函數(shù)的時(shí)間小于 threshhold，那么就放棄
    // 執(zhí)行 fn，并重新計(jì)時(shí)
    if (last && now < last + threshhold) {
      clearTimeout(timer)

      // 保證在當(dāng)前時(shí)間區(qū)間結(jié)束后，再執(zhí)行一次 fn
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, threshhold)

    // 在時(shí)間區(qū)間的最開始和到達(dá)指定間隔的時(shí)候執(zhí)行一次 fn
    } else {
      last = now
      fn.apply(context, args)
    }
  }
}

兩者應(yīng)用之后，直接帶來的效率。如果還是不能完全體會 debounce 和 throttle 的差異，可以到這個頁面看一下兩者可視化的比較。

參考地址