The debounce & throttle in Javascript（防抖與節(jié)流）

XboxYan 發(fā)布于2019-08-23 12:46 / 2698人閱讀

摘要：您的支持是我最大的動(dòng)力，我會(huì)保證提供高質(zhì)與清晰的文章與您共同成長(zhǎng)。一些文章中的與上面所談到的設(shè)置類似。防抖防抖技術(shù)允許我們捆綁多個(gè)連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應(yīng)用這個(gè)簡(jiǎn)單的舉個(gè)

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

節(jié)流[throttle]與防抖[debounce]在前端領(lǐng)域經(jīng)常涉及，下面我們會(huì)嘗試解釋其中的原理與差異與實(shí)現(xiàn)以及一些應(yīng)用場(chǎng)景

common sense

隨著應(yīng)用與需求復(fù)雜度不斷上升，節(jié)流與防抖也出現(xiàn)了一些相同的設(shè)置其中一點(diǎn)就是可以選擇觸發(fā)的leading和trailing（前置或后置）或both。

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

debounce

debounce: Debounce technique allows us to "group" multiple sequential calls in a single one.
防抖： 防抖技術(shù)允許我們捆綁多個(gè)連續(xù)調(diào)用成為單一的一次調(diào)用。可簡(jiǎn)單的理解防抖是將一次調(diào)用發(fā)生時(shí)的前后時(shí)間（TIMING）斷內(nèi)不允許再次觸發(fā)，若多次觸發(fā)則方法的真實(shí)調(diào)用根據(jù)設(shè)置可以在：

第一次觸發(fā)時(shí)（leading）--- 這將導(dǎo)致后續(xù)連續(xù)的觸發(fā)不再發(fā)生

最后一次觸后間隔至少一個(gè)TIMING內(nèi)沒(méi)有被再次觸發(fā)時(shí)調(diào)用（trailing）

Both

例如當(dāng)設(shè)置leading: true且 TIME = 400ms

防抖的實(shí)現(xiàn)：

/**
   * 返回一個(gè)函數(shù)，只要它一直被觸發(fā)將不會(huì)被調(diào)用
   * 函數(shù)將在其不再被觸發(fā)的N毫秒后調(diào)用，如果immediate被傳入那么
   * 函數(shù)將在第一次觸發(fā)是立即調(diào)用
   * 
   */

// 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);
    }
  }

// 這是其中的一種實(shí)現(xiàn)關(guān)于leading與trailing可自行調(diào)整immediate。

防抖的應(yīng)用

這個(gè)簡(jiǎn)單的舉個(gè)

云服務(wù)器 GPU云服務(wù)器 VUE防抖與節(jié)流 javascript in Debouncing Throttling

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98991.html

相關(guān)文章

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

摘要：封裝方法也比較簡(jiǎn)單，書中對(duì)此問(wèn)題也進(jìn)行了處理使用定時(shí)器，讓函數(shù)延遲秒后執(zhí)行，在此秒內(nèi)，然后函數(shù)再次被調(diào)用，則刪除上次的定時(shí)器，取消上次調(diào)用的隊(duì)列任務(wù)，重新設(shè)置定時(shí)器。在實(shí)際開(kāi)發(fā)中，函數(shù)一定是最實(shí)用最頻繁的一部分，無(wú)論是以函數(shù)為核心的函數(shù)式編程，還是更多人選擇的面向?qū)ο笫降木幊?，都?huì)有函數(shù)的身影，所以對(duì)函數(shù)進(jìn)行深入的研究是非常有必要的。函數(shù)節(jié)流比較直白的說(shuō)，函數(shù)節(jié)流就是強(qiáng)制規(guī)定一...

whinc 2019-08-22 11:21 評(píng)論0 收藏0
函數(shù)防抖與節(jié)流

摘要：函數(shù)防抖就是讓某個(gè)函數(shù)在上一次執(zhí)行后，滿足等待某個(gè)時(shí)間內(nèi)不再觸發(fā)此函數(shù)后再執(zhí)行，而在這個(gè)等待時(shí)間內(nèi)再次觸發(fā)此函數(shù)，等待時(shí)間會(huì)重新計(jì)算。 underscore.js提供了很多很有用的函數(shù)，今天想說(shuō)說(shuō)其中的兩個(gè)。這兩個(gè)函數(shù)都用于限制函數(shù)的執(zhí)行。 debounce 在解釋這個(gè)函數(shù)前，我們先從一個(gè)例子看下這個(gè)函數(shù)的使用場(chǎng)景。假設(shè)我們網(wǎng)站有個(gè)搜索框，用戶輸入文本我們會(huì)自動(dòng)聯(lián)想匹配出一些結(jié)果供...

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

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

Jenny_Tong 2019-08-23 13:42 評(píng)論0 收藏0
JavaScript：函數(shù)防抖與函數(shù)節(jié)流

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

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

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

_Zhao 2019-08-23 15:37 評(píng)論0 收藏0