<abbr id="coyyu"></abbr>

The debounce & throttle in Javascript（防抖與節流）

XboxYan 發布于2019-08-23 12:46 / 2686人閱讀

摘要：您的支持是我最大的動力，我會保證提供高質與清晰的文章與您共同成長。一些文章中的與上面所談到的設置類似。防抖防抖技術允許我們捆綁多個連續調用成為單一的一次調用。防抖的應用這個簡單的舉個

歡迎star和watch我的github issue blog，歡迎加入討論。
您的支持是我最大的動力，我會保證提供高質與清晰的文章與您共同成長。

節流[throttle]與防抖[debounce]在前端領域經常涉及，下面我們會嘗試解釋其中的原理與差異與實現以及一些應用場景

common sense

隨著應用與需求復雜度不斷上升，節流與防抖也出現了一些相同的設置其中一點就是可以選擇觸發的leading和trailing（前置或后置）或both。

一些文章中的immediate option與上面所談到的設置leading: true類似。

debounce

debounce: Debounce technique allows us to "group" multiple sequential calls in a single one.
防抖：防抖技術允許我們捆綁多個連續調用成為單一的一次調用。

可簡單的理解防抖是將一次調用發生時的前后時間（TIMING）斷內不允許再次觸發，若多次觸發則方法的真實調用根據設置可以在：

第一次觸發時（leading）--- 這將導致后續連續的觸發不再發生

最后一次觸后間隔至少一個TIMING內沒有被再次觸發時調用（trailing）

Both

例如當設置leading: true且 TIME = 400ms

防抖的實現：

/**
   * 返回一個函數，只要它一直被觸發將不會被調用
   * 函數將在其不再被觸發的N毫秒后調用，如果immediate被傳入那么
   * 函數將在第一次觸發是立即調用
   * 
   */

// es6 syntax import & export
export function deBounce(func, delay, immediate) {
    let timeout;

    return function executedFunction() {
      const context = this;
      const args = arguments;

      var later = function() {
        timeout = null;
        if(!immediate) func.apply(context, args);
      }

      const callNow = immediate && !timeout;

      clearTimeout(timeout);

      timeout = setTimeout(later, delay);

      if (callNow) func.apply(context, args);
    }
  }

// 這是其中的一種實現關于leading與trailing可自行調整immediate。

防抖的應用

這個簡單的舉個

GPU云服務器云服務器 VUE防抖與節流 javascript in Debouncing Throttling

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

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

高級函數技巧-函數防抖與節流

摘要：封裝方法也比較簡單，書中對此問題也進行了處理使用定時器，讓函數延遲秒后執行，在此秒內，然后函數再次被調用，則刪除上次的定時器，取消上次調用的隊列任務，重新設置定時器。在實際開發中，函數一定是最實用最頻繁的一部分，無論是以函數為核心的函數式編程，還是更多人選擇的面向對象式的編程，都會有函數的身影，所以對函數進行深入的研究是非常有必要的。函數節流比較直白的說，函數節流就是強制規定一...

whinc 2019-08-22 11:21 評論0 收藏0
函數防抖與節流

摘要：函數防抖就是讓某個函數在上一次執行后，滿足等待某個時間內不再觸發此函數后再執行，而在這個等待時間內再次觸發此函數，等待時間會重新計算。 underscore.js提供了很多很有用的函數，今天想說說其中的兩個。這兩個函數都用于限制函數的執行。 debounce 在解釋這個函數前，我們先從一個例子看下這個函數的使用場景。假設我們網站有個搜索框，用戶輸入文本我們會自動聯想匹配出一些結果供...

Mr_zhang 2019-08-21 10:31 評論0 收藏0
[譯]通過實例講解Debouncing和Throtting(防抖與節流)

摘要：譯通過實例講解和防抖與節流源碼中推薦的文章，為了學習英語，翻譯了一下原文鏈接作者本文來自一位倫敦前端工程師的技術投稿。首次或立即你可能發現防抖事件在等待觸發事件執行，直到事件都結束后它才執行。 [譯]通過實例講解Debouncing和Throtting(防抖與節流) lodash源碼中推薦的文章，為了學習（英語），翻譯了一下~ 原文鏈接作者：DAVID CORBACHO 本文來自一位...

Jenny_Tong 2019-08-23 13:42 評論0 收藏0
JavaScript：函數防抖與函數節流

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

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

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

_Zhao 2019-08-23 15:37 評論0 收藏0