高級函數(shù)技巧-函數(shù)防抖與節(jié)流

whinc 發(fā)布于2019-08-22 11:21 / 774人閱讀

摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數(shù)延遲秒后執(zhí)行，在此秒內，然后函數(shù)再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。

在實際開發(fā)中，函數(shù)一定是最實用最頻繁的一部分，無論是以函數(shù)為核心的函數(shù)式編程，還是更多人選擇的面向對象式的編程，都會有函數(shù)的身影，所以對函數(shù)進行深入的研究是非常有必要的。

函數(shù)節(jié)流

比較直白的說，函數(shù)節(jié)流就是強制規(guī)定一個函數(shù)在一段時間內能夠被執(zhí)行的最大次數(shù)，比如，規(guī)定某個函數(shù)在每100毫秒的時間段內，最多被執(zhí)行一次,那么對應的在10s(10000ms)內，最多就會執(zhí)行100(10000ms/100ms)次

這里節(jié)流和防抖的概念比較容易搞混，所以文中許多關鍵性定義，參考此處文檔翻譯過來，移步到the-difference-between-throttling-and-debouncing

在瀏覽器中，頻繁的DOM操作非常消耗內存和CPU時間，比如監(jiān)聽了resize,touchmove,scroll...等事件，在dom改變時都會不斷觸發(fā)回調?，F(xiàn)在的react 和 vue 等前端框架都提出了虛擬DOM的概念，會把多次DOM操作合并到一次真實操作中，就是使用了Diff算法，這樣就大大減低了DOM操作的頻次。但是，這里并不是要討論diff算法，如果感興趣可以戳上面的鏈接，而是解釋如何利用setTimeout來減低DOM頻繁操作的風險。

最早接觸到這個概念的時候，是在《高程3》最后幾章上面。

函數(shù)節(jié)流背后的基本思想是指，某些代碼不可以在沒有間斷的情況下連續(xù)重復執(zhí)行.第一次調用函數(shù)，創(chuàng)建了一個定時器，在指定的時間間隔之后運行代碼。當?shù)诙握{用該函數(shù)時，它會清除前一次的定時器并設置另一個。

封裝方法也比較簡單，書中對此問題也進行了處理：

  function throttle(method,context) {
    clearTimeout(method.tId);
    method.tId = setTimeout(function(){
       method.call(context)
      },1000)
  }

使用定時器，讓函數(shù)延遲1秒后執(zhí)行，在此1秒內，然后throttle函數(shù)再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。這樣就可以保證1秒內函數(shù)只會被觸發(fā)一次，達到了函數(shù)節(jié)流的目的

可以利用 resize事件測試一下；

   var  i = 0;
   function handler(){
       console.log(i++);
    }
   window.onresize = function(){
       throttle(handler,window)
   }

可以發(fā)現(xiàn)，在瀏覽器的調試模式下，切換橫屏/豎屏，只觸發(fā)了一次

函數(shù)防抖

函數(shù)防抖規(guī)定函數(shù)再次執(zhí)行需要滿足兩個條件：

1，必須要等待一段時間；

2，在條件1等待的時間段內不再被觸發(fā)，一旦在條件1等待的時間內再次被觸發(fā)，等待時間就要重新開始計算。

比如：對一個函數(shù)加了100ms的防抖操作，然后在3s(3000ms)時間段內，這個函數(shù)被不連續(xù)的調用了1000次，3s后停止調用。它只會在3100ms的時刻執(zhí)行一次。

具體實現(xiàn)代碼，看下 underscore.js中的 _.debounce 源碼：

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout, args, context, timestamp, result;

  var later = function() {
 var last = _.now() - timestamp;

 if (last < wait && last >= 0) {
   timeout = setTimeout(later, wait - last);
 } else {
   timeout = null;
   if (!immediate) {
     result = func.apply(context, args);
     if (!timeout) context = args = null;
   }
 }
  };

  return function() {
   context = this;
   args = arguments;
   timestamp = _.now();
   var callNow = immediate && !timeout;
   if (!timeout) timeout = setTimeout(later, wait);
   if (callNow) {
     result = func.apply(context, args);
     context = args = null;
   }

   return result;
  };
};

wait參數(shù)代表debounce時間， _.now()返回當前時間的時間戳，同樣以ms 為單位。如果傳入了 immediate,會立即觸發(fā)回調函數(shù)。

應用場景：

在使用高德地址聯(lián)想輸入提示時，只有在用戶停止鍵盤輸入時，才去進行ajax請求

elementUI inputNumber計算器組件中,為了防止用戶多次點擊，數(shù)字自動增減，也使用了防抖操作，有興趣可以查看源碼

參考資料：

the-difference-between-throttling-and-debouncing

淺談javascript的函數(shù)節(jié)流(騰訊全端 AlloyTeam 團隊 Blog)

JavaScript 函數(shù)節(jié)流

函數(shù)防抖與節(jié)流

云服務器 GPU云服務器 VUE防抖與節(jié)流函數(shù)節(jié)流 js函數(shù)節(jié)流 js高級函數(shù)

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

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

小菊花課堂之JS的防抖與節(jié)流

摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發(fā)中，我們經常會碰到一些會持...

leoperfect 2019-08-23 13:53 評論0 收藏0
小菊花課堂之JS的防抖與節(jié)流

摘要：文章來源詳談防抖和節(jié)流輕松理解函數(shù)節(jié)流和函數(shù)防抖函數(shù)防抖和節(jié)流好啦，今天的小菊花課堂之的防抖與節(jié)流的內容就告一段落啦，感各位能耐心看到這里。前言陸游有一首《冬夜讀書示子聿》——古人學問無遺力，少壯工夫老始成。紙上得來終覺淺，絕知此事要躬行。，其中的意思想必大家都能明白，在學習或工作中，不斷的印證著這首詩的內涵。所以，又有了此篇小菊花文章。詳解在前端開發(fā)中，我們經常會碰到一些會持...

Yangder 2019-08-02 12:10 評論0 收藏0
JavaScript：函數(shù)防抖與函數(shù)節(jié)流

摘要：函數(shù)防抖簡單實現(xiàn)模擬請求獲取函數(shù)的作用域和變量清除定時器節(jié)流名詞解釋連續(xù)執(zhí)行函數(shù)，每隔一定時間執(zhí)行函數(shù)。效果函數(shù)防抖是某一段時間內只執(zhí)行一次函數(shù)節(jié)流是間隔時間執(zhí)行，不管事件觸發(fā)有多頻繁，都會保證在規(guī)定時間內一定會執(zhí)行一次真正的事件處理函數(shù)。防抖（debounce）名詞解釋：在事件被觸發(fā)n秒后再執(zhí)行回調函數(shù)，如果在這n秒內又被觸發(fā)，則重新計時。使用場景：以百度輸入框例，比如你要查詢...

elina 2019-08-23 15:26 評論0 收藏0
前端進擊的巨人（八）：淺談函數(shù)防抖與節(jié)流

摘要：隆重請出主角防抖與節(jié)流。防抖與節(jié)流的異同相同都是防止某一時間段內，函數(shù)被頻繁調用執(zhí)行，通過時間頻率控制，減少回調函數(shù)執(zhí)行次數(shù)，來實現(xiàn)相關性能優(yōu)化。參考文章分鐘理解的節(jié)流防抖及使用場景函數(shù)防抖和節(jié)流 showImg(https://segmentfault.com/img/bVburM8?w=800&h=600); 本篇課題，或許早已是爛大街的解讀文章。不過春招系列面試下來，不少伙伴們還...

_Zhao 2019-08-23 15:37 評論0 收藏0
防抖與節(jié)流（源碼學習）

摘要：防抖與節(jié)流源碼學習最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學習過程源碼來源防抖函數(shù)防抖使用場景現(xiàn)在我們需要做一個搜索框，當用戶輸入文字，執(zhí)行事件的時候，需要發(fā)出異步請求去進行結果查詢。防抖與節(jié)流（源碼學習）最近自己擼了一個輪播圖，在點擊切換的時候，為了尋求更好的用戶體驗，引入了節(jié)流，在此記錄對源碼的學習過程源碼來源：unders...

instein 2019-08-22 17:12 評論0 收藏0