国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Debounce 和 Throttle 的原理及實現

Benedict Evans / 2949人閱讀

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

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 < last + threshhold) {
      clearTimeout(timer)

      // 保證在當前時間區間結束后，再執行一次 fn
      timer = setTimeout(function () {
        last = now
        fn.apply(context, args)
      }, threshhold)

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

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

參考地址

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/96095.html

相關文章

  • 淺談throttle以及debounce的原理和實現

    摘要：淺談以及的原理和實現背景日常開發中我們經常會遇到一些需要節流調用或者壓縮調用次數的情況例如之前我在完成一個需求的時候就遇到了因為后端并發問題導致收到多條信息從而導致函數被重復調用的情況當時的做法是通過對函數的調用進行注冊遇到多次調用的時候清 淺談throttle以及debounce的原理和實現 背景 日常開發中,我們經常會遇到一些需要節流調用,或者壓縮調用次數的情況,例如之前我在完成...

    jsbintask 評論0 收藏0

  • 徹底弄懂函數防抖和函數節流

    摘要：若時間差大于間隔時間，則立刻執行一次函數。不同點函數防抖，在一段連續操作結束后，處理回調，利用和實現。函數防抖關注一定時間連續觸發的事件只在最后執行一次，而函數節流側重于一段時間內只執行一次。 原博客地址，歡迎star 函數防抖和節流 函數防抖和函數節流：優化高頻率執行js代碼的一種手段，js中的一些事件如瀏覽器的resize、scroll，鼠標的mousemove、mouseover...

    Mr_houzi 評論0 收藏0

  • throttle 和 debounce 簡單實現

    摘要：但是，我在測試中，智能手機中的慢速滾動可能會觸發每秒多達個事件。把電梯完成一次運送，類比為一次函數的執行和響應。假設電梯有兩種運行策略和，超時設定為秒，不考慮容量限制。保證如果電梯第一個人進來后，秒后準時運送一次，不等待。 使用場景 某些場景下，一些計算量比較大的函數，操作 DOM 函數等函數會被頻繁調用執行，而且由于人的反應有限實際不需要那么多計算，就會造成極大的性能浪費。舉個例子當...

    Taste 評論0 收藏0

  • 節流和防抖動

    摘要：起因面試被問到了節流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學起首先先看字面意思節流的意思就是水龍頭關小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發生形變的那一刻舉個例子節流在改變窗口大小 起因 面試被問到了節流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學起 首先, 先看字面意思:節流(throttl...

    hellowoody 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<