函數防抖和節流

daydream 發布于2019-08-23 16:50 / 717人閱讀

摘要：應用場景給按鈕加函數防抖防止表單多次提交。對于輸入框連續輸入進行驗證時，用函數防抖能有效減少請求次數。參考十分鐘學會防抖和節流輕松理解函數節流和函數防抖

函數防抖和節流 防抖

對于觸發非常頻繁又沒有必要每次都執行的事件，希望合并到一次去執行；

實現思路：

事件觸發后，在規定的時間范圍內如果事件重復觸發，那么忽略之前觸發的事件，并且重新開始計時，直到某一次事件觸發后大于規定時間，我們才執行需要執行的代碼段（函數）；

看起來就像是只執行了用戶快速操作的最后一次事件；

代碼實現：

var debounce = function(fn, delayTime) {
 var timeId;
 return function() {    
    var context = this, args = arguments;
       timeId && clearTimeout(timeout);
       timeId = setTimeout(function{
          fn.apply(context, args);
    }, delayTime)
  }
}

簡單分析：

利用閉包保存一個setTimeout的id，如果在delayTime內閉包中的函數再次執行，會立刻clear掉上一次的延時回調，生成一個新的延時回調；如果超過delayTime沒有再次執行閉包中的函數，那延時回調就會被執行，這樣才算是真正執行了需要執行的事件。

應用場景：

給按鈕加函數防抖防止表單多次提交。

對于輸入框連續輸入進行AJAX驗證時，用函數防抖能有效減少請求次數。

判斷scroll是否滑到底部，滾動事件+函數防抖

節流

對于觸發非常頻繁的事件，在規定時間間隔后才能執行，在規定時間間隔內觸發的事件會被忽略，但是不會重新開始計時；

實現思路：

規定一個時間，一次觸發后，在規定時間內觸發的事件都忽略，超過規定時間后可以重新執行觸發的事件；

代碼實現：（兩種）

時間戳

var throttle = (fn, delayTime) => {
    var _start = Date.now();
    return function() {
        var _now = Date.now(), context = this, args = arguments;
        if(_now - _start >= delayTime) {
              fn.apply(context, args);
               _start = Date.now();
        }
      }
}

簡單分析：

先設定一個初始時間，然后每次執行閉包內的函數都與當前時間做比較，如果小于delayTime，什么也不做，忽略該次事件，如果大于delayTime，執行回調函數fn，重置初始時間；

定時器

var throttle = function(fn, delayTime) {
      var flag;
      return function() {
        var context = this, args = arguments;
        if(!flag) {
            fn.apply(context, args);
              flag = setTimeout(function() {    
                  flag = false;
            }, delayTime);
          }
      }
}

簡單分析：

通過設定一個標志位，通過標志位判斷是否可以執行回調函數，在延時函數中執行回調的同時將標志位置為可再次執行，這樣就保證了在規定時間之后能再次執行需要的回調函數；

應用場景：

游戲中的刷新率

DOM元素拖拽

Canvas畫筆功能

防抖和節流區別

防抖是把之前頻繁的事件觸發都放到某一次停頓時觸發，可以理解為執行最后一次（并不準確）；節流則是執行完一次以后等待一段時間之后才能再次執行，可以理解為第一次；這意味著防抖執行的是最新的，而節流在等待中如果事件有更新是不會執行的，會被忽略，這兩者應用場景不同；

防抖適合多次事件一次響應的情況；

節流適合大量事件按時間做平均分配觸發。

參考：

十分鐘學會防抖和節流

輕松理解JS函數節流和函數防抖

云服務器 GPU云服務器 VUE防抖與節流函數節流 js函數節流防抖

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

轉載請注明本文地址：http://m.hztianpu.com/yun/103373.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
JavaScript防抖和節流

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

DevWiki 2019-08-23 17:09 評論0 收藏0
函數的防抖和節流是個啥？？？

摘要：函數防抖和節流，都是控制事件觸發頻率的方法。封裝一個函數，讓持續觸發的事件監聽是我們封裝的這個函數，將目標函數作為回調傳進去，等待一段時間過后執行目標函數第二點實現了，再看第一點持續觸發不執行。曾經面試時候被問到過這個，年少的我一臉無知。。。后來工作中遇到了一個場景：輸入名稱的同時去服務器校驗名稱是否重復，但發現之前的代碼竟然都沒做限制，輸入一次發一次請求。簡直忍不了，就在項目的u...

edagarli 2019-08-23 18:35 評論0 收藏0
JS簡單實現防抖和節流

摘要：定時器實現當觸發事件的時候，我們設置一個定時器，再觸發事件的時候，如果定時器存在，就不執行直到秒后，定時器執行執行函數，清空定時器，這樣就可以設置下個定時器。當最后一次停止觸發后，由于定時器的延遲，可能還會執行一次函數。一、什么是防抖和節流 Ps: 比如搜索框，用戶在輸入的時候使用change事件去調用搜索，如果用戶每一次輸入都去搜索的話，那得消耗多大的服務器資源，即使你的服務器資源...

MRZYD 2019-08-23 10:37 評論0 收藏0