JS簡單實現防抖和節流

MRZYD 發布于2019-08-23 10:37 / 1394人閱讀

摘要：定時器實現當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行直到秒后，定時器執行執行函數，清空定時器，這樣就可以設置下個定時器。當最后一次停止觸發后，由于定時器的延遲，可能還會執行一次函數。

一、什么是防抖和節流

Ps: 比如搜索框，用戶在輸入的時候使用change事件去調用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務器資源，即使你的服務器資源很強大，也不帶這么玩的。

1. 防抖 - debounce

其中一種解決方案就是每次用戶停止輸入后，延遲超過500ms時，才去搜索此時的String，這就是防抖。

原理：將若干個函數調用合成為一次，并在給定時間過去之后僅被調用一次。

代碼實現：

function debounce(fn, delay) {
  // 維護一個 timer，用來記錄當前執行函數狀態
  let timer = null;

  return function() {
    // 通過 ‘this’ 和 ‘arguments’ 獲取函數的作用域和變量
    let context = this;
    let args = arguments;
    // 清理掉正在執行的函數，并重新執行
    clearTimeout(timer);
    timer = setTimeout(function() {
      fn.apply(context, args);
    }, delay);
  }
}
let flag = 0; // 記錄當前函數調用次數
// 當用戶滾動時被調用的函數
function foo() {
  flag++;
  console.log("Number of calls: %d", flag);
}

// 在 debounce 中包裝我們的函數，過 2 秒觸發一次
document.body.addEventListener("scroll", debounce(foo, 2000));

debounce函數封裝后，返回內部函數

每一次事件被觸發，都會清除當前的timer然后重新設置超時并調用。這會導致每一次高頻事件都會取消前一次的超時調用，導致事件處理程序不能被觸發

只有當高頻事件停止，最后一次事件觸發的超時調用才能在delay時間后執行

2. 節流 - throttle

另一種解決方案比防抖要寬松些，這時我們不想用戶一味的輸入，而是給用戶一些搜索提示，所以在當中限制每過500ms就查詢一次此時的String，這就是節流。

原理：節流函數不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函數。

代碼實現有兩種，一種是時間戳，另一種是定時器
1）時間戳實現：

function throttle(func, delay){
  let prev = Date.now();
  return function(){
    const context = this;
    const args    = arguments;
    const now     = Date.now();
    if(now - prev >= delay){
      func.apply(context, args);
      prev = Date.now();
    }
  }
}

當高頻事件觸發時，第一次應該會立即執行（給事件綁定函數與真正觸發事件的間隔如果大于delay的話），而后再怎么頻繁觸發事件，也都是會每delay秒才執行一次。而當最后一次事件觸發完畢后，事件也不會再被執行了。

2）定時器實現：
當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行；直到delay秒后，定時器執行執行函數，清空定時器，這樣就可以設置下個定時器。

fucntion throttle(func, delay){
  let timer = null;

  return funtion(){
    let context = this;
    let args    = arguments;
    if(!timer){
      timer = setTimeout(function(){
        func.apply(context, args);
        timer = null;
      }, delay);
    }
  }
}

當第一次觸發事件時，肯定不會立即執行函數，而是在delay秒后才執行。
之后連續不斷觸發事件，也會每delay秒執行一次。
當最后一次停止觸發后，由于定時器的delay延遲，可能還會執行一次函數。

3）綜合使用時間戳與定時器，完成一個事件觸發時立即執行，觸發完畢還能執行一次的節流函數

function throttle(func, delay){
  let timer = null;
  let startTime = Date.now();

  return function(){
    let curTime = Date.now();
    let remaining = delay - (curTime - startTime);
    const context = this;
    const args = arguments;

    clearTimeout(timer);
    if(remaining <= 0){
      func.apply(context,args);
      startTime = Date.now();
    }else{
      timer = setTimeout(func, remaining);
    }
  }
}

需要在每個delay時間中一定會執行一次函數，因此在節流函數內部使用開始時間、當前時間與delay來計算remaining，當remaining <= 0時表示該執行函數了，如果還沒到時間的話就設定在remaining時間后再觸發。當然在remaining這段時間中如果又一次發生事件，那么會取消當前的計時器，并重新計算一個remaining來判斷當前狀態。

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

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

詳談js防抖和節流

摘要：本文會分別介紹什么是防抖和節流，它們的應用場景，和實現方式。防抖和節流都是為了解決短時間內大量觸發某函數而導致的性能問題，比如觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。本文由小芭樂發表 0. 引入首先舉一個例子：模擬在輸入框輸入后做ajax查詢請求，沒有加入防抖和節流的效果，這里附上完整可執行代碼：沒有防抖 ...

shevy 2019-08-23 13:54 評論0 收藏0
徹底弄懂函數防抖和函數節流

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

Mr_houzi 2019-08-26 13:33 評論0 收藏0
函數防抖和節流

摘要：應用場景給按鈕加函數防抖防止表單多次提交。對于輸入框連續輸入進行驗證時，用函數防抖能有效減少請求次數。參考十分鐘學會防抖和節流輕松理解函數節流和函數防抖函數防抖和節流防抖對于觸發非常頻繁又沒有必要每次都執行的事件，希望合并到一次去執行；實現思路：事件觸發后，在規定的時間范圍內如果事件重復觸發，那么忽略之前觸發的事件，并且重新開始計時，直到某一次事件觸發后大于規定時間，我們才執...

daydream 2019-08-23 16:50 評論0 收藏0
淺談js防抖和節流

摘要：防抖和節流嚴格算起來應該屬于性能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。防抖和節流嚴格算起來應該屬于性能優化的知識，但實際上遇到的頻率相當高，處理不當或者放任不管就容易引起瀏覽器卡死。所以還是很有必要早點掌握的。（信我，你看完肯定就懂了）從滾動條監聽的例子說起先說一個常見的功能，很多網站會提供這么一個按鈕：用于返回頂部。showImg(ht...

opengps 2019-08-26 13:32 評論0 收藏0
JavaScript防抖和節流

摘要：概念函數防抖和函數節流，兩者都是優化高頻率執行代碼的一種手段。防抖任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。節流指定時間間隔內只會執行一次任務一定時間內方法只跑一次。概念函數防抖和函數節流，兩者都是優化高頻率執行js代碼的一種手段。防抖：任務頻繁觸發的情況下，只有任務觸發的間隔超過指定間隔的時候，任務才會執行。節流：指定時間間隔內只會執行一次任...

DevWiki 2019-08-23 17:09 評論0 收藏0