關于js節流函數throttle和防抖動debounce

shery 發布于2019-08-02 10:18 / 923人閱讀

摘要：主要實現在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現多余調用操作的舍棄。

廢話不多說，直奔主題。

什么是throttle和debounce？

這兩個方法的主要目的多是用于性能優化。最常見的應用嘗盡就是在通過監聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發多次，如果其中涉及的代碼偏重，那么性能消耗肯定是非常大。使用節流和防抖就是去優化這種情況，通過同的使用場景決定使用的對象，接下來就對比一下兩者的區別。

throttle

在指定的delay(延遲時間)內，在delay間隔內多次調用，throttle會舍棄中間的所有調用操作，直到用戶停止行為后的delay后執行一次預期執行函數。這就稱為函數節流。

debounce

跟節流函數一樣，debounce也是在設定的delay間隔內多次調用執行函數的話，會舍棄這些操作。和throttle不同的是，debounce多了個強制執行時間參數mustRunDelay，不管前面舍棄了多少次操作，一旦時間tag>=mustRunDelay的話，執行函數一定會被調用一次。接下來上代碼，更直觀。

原文參考源代碼出處

原文對于節流和防抖的描述有待商榷，但是最終的代碼其實就是節流和防抖的綜合體。通過是否傳入mustRunDelay參數來區分。

function throttle (fn, delay, mustRunDelay = 0) {
  let timer = null;
  let tStart; //創建父級作用域時間tag
  return function () {
    const context = this;
    const args = arguments;
    const tCurr = +new Date();//子作用域時間tag
    clearTimeout(timer);//每次執行，先清空定時器，這步操作便是delay時間內舍棄多余操作的實現
    if (!tStart) { // 首次給時間tag賦值
      tStart = tCurr; 
    }
    //這層判斷就是判斷是否達到強制執行的條件
    if (mustRunDelay !== 0 && tCurr - tStart >= mustRunDelay) {
      fn.apply(context, args);
      tStart = tCurr;
    } else {
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    }
  };
}

忽略throttle的方法名，按照調用方式不同，他也可以是debounce。主要實現在于通過異步操作的事件間隔，對于前后兩次調用方法打時間tag進行比較，用清空定時器的操作實現多余調用操作的舍棄。還有一點是用了閉包的機制，便于管理tStart變量，因為閉包的關系，tStart內存不會被回收，否則需要在全局定義該變量。

結尾

具體怎么用呢，拿scroll事件舉個例子：

window.addEventListenr("scroll",throttle(scrollHandle,delay,mustRunDelay),false);

大概就這意思，使用時候根據場景使用，mustRunDelay>0？防抖：節流。

云服務器 GPU云服務器 js函數節流函數節流關于c語言函數返回值 Debouncing

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

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

關于js節流函數throttle和防抖動debounce

摘要：主要實現在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優化。最常見的應用嘗盡就是在通過監聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發多...

張紅新 2019-08-22 16:45 評論0 收藏0
關于js節流函數throttle和防抖動debounce

摘要：主要實現在于通過異步操作的事件間隔，對于前后兩次調用方法打時間進行比較，用清空定時器的操作實現多余調用操作的舍棄。廢話不多說，直奔主題。什么是throttle和debounce？這兩個方法的主要目的多是用于性能優化。最常見的應用嘗盡就是在通過監聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發多...

lieeps 2019-08-29 15:12 評論0 收藏0
節流和防抖動

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

hellowoody 2019-08-22 15:41 評論0 收藏0
JS之節流和防抖

摘要：節流在指定時間之內，讓函數只觸發一次。防抖對于一定時間段的連續的函數調用，只讓其執行一次。總結以上只是很簡單的寫了一下節流和防抖的原理，在里，實現起來更加復雜，但是背后的原理核心就是上邊代碼寫的。概述在平時的開發中，經常會聽到兩個差不多很相近的詞。節流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優化方案。節流：在指定時間之內，讓函數只觸發一次。防...

fevin 2019-08-26 17:15 評論0 收藏0
理解節流和防抖

摘要：所以針對此類事件則需要進行節流，或者防抖動處理。節流判斷是否已空閑，如果在執行中，則直接函數節流二防抖對于一定時間段內的連續的函數調用，只執行一次原理其實就是一個定時器，當我們觸發一個事件時，讓這個事件延遲一會在執行。在瀏覽器dom事件里面，一些事件會隨著用戶的操作不間斷的觸發，比如：為一個元素綁定拖拽事件，為頁面綁定resize事件（重新調整瀏覽器窗口大小），頁面滾動。如果dom操...

zebrayoung 2019-08-22 16:48 評論0 收藏0