Debounce函數和Throttle函數的實作原理

這篇文章主要介紹了關於Debounce函數和Throttle函數的實現原理，有著一定的參考價值，現在分享給大家，有需要的朋友可以參考一下

Debounce 和Throttle 的原理及實現

• throttle和debounce皆是透過減少實際邏輯處理過程的執行來提高事件處理函數運作效能的手段，throttle並沒有實質上減少事件的觸發次數。兩者在概念理解上確實比較容易令人混淆，

• debounce 強制函數在某段時間只執行一次，throttle 強制函數以固定的速率執行。在處理一些高頻率觸發的 DOM 事件的時候，它們都能極大地提高使用者體驗。

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

有多頻繁呢？以mousemove 為例，根據DOM Level 3 的規定，「如果滑鼠連續移動，那麼瀏覽器就應該觸發多個連續的mousemove 事件」，這意味著瀏覽器會在其內部計時器允許的情況下，根據用戶移動滑鼠的速度來觸發mousemove 事件。 （當然了，如果移動滑鼠的速度夠快，例如「刷」一下掃過去，瀏覽器是不會觸發這個事件的）。 resize、scroll 和 key* 等事件與此類似。

1.debounce 函數所做的事情就是，強制一個函數在某個連續時間段內只執行一次，即使它本來會被呼叫多次。我們希望在使用者停止某個操作一段時間之後才執行對應的監聽函數，而不是在使用者操作的過程當中，瀏覽器觸發多少次事件，就執行多少次監聽函數。

function debounce(fn, delay) {

  // 定时器，用来 setTimeout
  var timer

  // 返回一个函数，这个函数会在一个时间区间结束后的 delay 毫秒时执行 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    // 每次这个返回的函数被调用，就清除定时器，以保证不执行 fn
    clearTimeout(timer)

    // 当返回的函数被最后一次调用后（也就是用户停止了某个连续的操作），
    // 再过 delay 毫秒就执行 fn
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

debounce 回傳了一個閉包，這個閉包依然會被連續頻繁地調用，但是在閉包內部，卻限制了原始函數fn 的執行，強制fn 只在連續操作停止後只執行一次。

Throttle

throttle 的概念理解起來比較容易，就是固定函數執行的速率，也就是所謂的「節流」。正常

/**
*
* @param fn {Function}   实际要执行的函数
* @param delay {Number}  执行间隔，单位是毫秒（ms）
*
* @return {Function}     返回一个“节流”函数
*/

function throttle(fn, threshhold) {

  // 记录上次执行的时间
  var last

  // 定时器
  var timer

  // 默认间隔为 250ms
  threshhold || (threshhold = 250)

  // 返回的函数，每过 threshhold 毫秒就执行一次 fn 函数
  return function () {

    // 保存函数调用时的上下文和参数，传递给 fn
    var context = this
    var args = arguments

    var now = +new Date()

    // 如果距离上次执行 fn 函数的时间小于 threshhold，那么就放弃
    // 执行 fn，并重新计时
    if (last && now <p>兩者應用後，直接帶來的效率。如果還是不能完全體會 debounce 和 throttle 的差異，可以到 這個頁面 看一下兩者視覺化的比較。 <br><img src="/static/imghwm/default1.png" data-src="https://img.php.cn//upload/image/571/717/740/1531471276493544.png?x-oss-process=image/resize,p_40" class="lazy" title="1531471276493544.png" alt="Debounce函數和Throttle函數的實作原理"></p><p>以上就是本文的全部內容，希望對大家的學習有所幫助，更多相關內容請關注PHP中文網！ </p><p>相關推薦：</p><p class="comments-box-content"></p><p class="mt20 ad-detail-mm hidden-xs"><a title="对于JavaScript中的函数重载的说明" href="http://www.php.cn/js-tutorial-406490.html" target="_blank">對於JavaScript中的函數重載的說明</a><br></p><p class="mt20 ad-detail-mm hidden-xs"><a title="利用JavaScript中发出HTTP请求的方法" href="http://www.php.cn/js-tutorial-406487.html" target="_blank">利用JavaScript中發出HTTP請求的方法</a><br></p>

以上是Debounce函數和Throttle函數的實作原理的詳細內容。更多資訊請關注PHP中文網其他相關文章！