debounce(防抖)和throttle(節流)

ssshooter 發布于2019-08-01 15:28 / 875人閱讀

摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區別就在于持續觸發事件時，前者合并事件并在最后時間去觸發事件，而后者則是隔間時間觸發一次關鍵知識點定時器閉包資源在線測試源代碼

防抖和節流

窗口的resize、scroll，輸入框內容校驗等操作時，如果這些操作處理函數較為復雜或頁面頻繁重渲染等操作時，如果事件觸發的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。此時我們可以采用debounce（防抖）和throttle（節流）的方式來減少觸發的頻率，同時又不影響實際效果。

debounce 防抖

debounce（防抖），簡單來說就是防止抖動。

從上圖中我們可以看到，當持續觸發事件時，debounce會合并事件且不會去觸發事件，當一定時間內沒有觸發再這個事件時，才真正去觸發事件～一起來實現個簡單的debounce：

function debounce(fn, delay) {
  var ctx;
  var args;
  var timer = null;

  var later = function () {
    fn.apply(ctx, args);
    // 當事件真正執行后，清空定時器
    timer = null;
  };

  return function () {
    ctx = this;
    args = arguments;
    // 當持續觸發事件時，若發現事件觸發的定時器已設置時，則清除之前的定時器
    if (timer) {
      clearTimeout(timer);
      timer = null;
    }

    // 重新設置事件觸發的定時器
    timer = setTimeout(later, delay);
  };
}

效果圖:

throttle 節流

throttle（節流），當持續觸發事件時，保證隔間時間觸發一次事件。

上圖中綠色塊表示觸發一次事件，持續觸發事件時，throttle會合并一定時間內的事件，并在該時間結束時真正去觸發一次事件～一起來看看throttle的簡單實現：

function throttle(fn, delay) {
  var ctx;
  var args;
  // 記錄上次觸發事件
  var previous = Date.now();

  var later = function () {
    fn.apply(ctx, args);
  };

  return function () {
    ctx = this;
    args = arguments;
    var now = Date.now();
    // 本次事件觸發與上一次的時間比較
    var diff = now - previous - delay;

    // 如果隔間時間超過設定時間，即再次設置事件觸發的定時器
    if (diff >= 0) {
      // 更新最近事件觸發的時間
      previous = now;
      setTimeout(later, delay);
    }
  };
}

效果圖:

總結

根據實際業務場景，合理的利用debounce（防抖）和throttle（節流）可以優化性能和提高用戶體驗。兩者間的核心區別就在于持續觸發事件時，前者合并事件并在最后時間去觸發事件，而后者則是隔間時間觸發一次～

關鍵知識點

setTimeout 定時器

w3school

Closure 閉包

ruanyifeng

資源 在線測試 源代碼

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

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

debounce(防抖)和throttle(節流)

摘要：防抖防抖，簡單來說就是防止抖動。兩者間的核心區別就在于持續觸發事件時，前者合并事件并在最后時間去觸發事件，而后者則是隔間時間觸發一次關鍵知識點定時器閉包資源在線測試源代碼防抖和節流窗口的resize、scroll，輸入框內容校驗等操作時，如果這些操作處理函數較為復雜或頁面頻繁重渲染等操作時，如果事件觸發的頻率無限制，會加重瀏覽器的負擔，導致用戶體驗非常糟糕。此時我們可以采用debo...

2bdenny 2019-08-19 18:46 評論0 收藏0
函數防抖Debounce和函數節流Throttle

摘要：函數節流函數防抖函數節流和函數防抖函數節流和函數防抖二者很容易被混淆起來。函數防抖函數在特定的時間內不被再調用后執行。一句話概括函數節流是從用戶開始輸入就開始計時，而函數節流是從用戶停止輸入開始計時。函數節流 & 函數防抖函數節流和函數防抖函數節流和函數防抖二者很容易被混淆起來。下面貼英文原文，建議認真閱讀：Debouncing enforces that a function ...

NicolasHe 2019-08-22 15:23 評論0 收藏0
說說JavaScript中函數的防抖 (Debounce) 與節流 (Throttle)

摘要：基礎防抖我們現在寫一個最基礎的防抖處理標記事件也做如下改寫現在試一下，我們會發現只有我們停止滾動秒鐘的時候，控制臺才會打印出一行隨機數。為何要防抖和節流有時候會在項目開發中頻繁地觸發一些事件,如 resize、 scroll、 keyup、 keydown等，或者諸如輸入框的實時搜索功能，我們知道如果事件處理函數無限制調用，會大大加重瀏覽器的工作量，有可能導致頁面卡頓影響體驗；后臺...

yanwei 2019-08-23 18:10 評論0 收藏0
js 防抖節流 JavaScript

摘要：此時需要采用防抖和節流的方式來減少調用頻率，同時不影響原來效果。函數防抖當持續觸發事件時，一段時間段內沒有再觸發事件，事件處理函數才會執行一次，如果設定的時間到來之前就觸發了事件，延時重新開始。 js 防抖節流 JavaScript 實際工作中，通過監聽某些事件，如scroll事件檢測滾動位置，根據滾動位置顯示返回頂部按鈕；如resize事件，對某些自適應頁面調整DOM的渲染；如ke...

int64 2019-08-23 14:48 評論0 收藏0
徹底弄懂函數防抖和函數節流

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

Mr_houzi 2019-08-26 13:33 評論0 收藏0