成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

lieeps / 2969人閱讀

摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。

廢話不多說，直奔主題。

什么是throttle和debounce？

這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多次，如果其中涉及的代碼偏重，那么性能消耗肯定是非常大。使用節(jié)流和防抖就是去優(yōu)化這種情況，通過同的使用場景決定使用的對象，接下來就對比一下兩者的區(qū)別。

throttle

在指定的delay(延遲時間)內(nèi)，在delay間隔內(nèi)多次調(diào)用，throttle會舍棄中間的所有調(diào)用操作，直到用戶停止行為后的delay后執(zhí)行一次預(yù)期執(zhí)行函數(shù)。這就稱為函數(shù)節(jié)流。

debounce

跟節(jié)流函數(shù)一樣，debounce也是在設(shè)定的delay間隔內(nèi)多次調(diào)用執(zhí)行函數(shù)的話，會舍棄這些操作。和throttle不同的是，debounce多了個強(qiáng)制執(zhí)行時間參數(shù)mustRunDelay，不管前面舍棄了多少次操作，一旦時間tag>=mustRunDelay的話，執(zhí)行函數(shù)一定會被調(diào)用一次。接下來上代碼，更直觀。

原文參考源代碼出處

原文對于節(jié)流和防抖的描述有待商榷，但是最終的代碼其實就是節(jié)流和防抖的綜合體。通過是否傳入mustRunDelay參數(shù)來區(qū)分。

function throttle (fn, delay, mustRunDelay = 0) {
  let timer = null;
  let tStart; //創(chuàng)建父級作用域時間tag
  return function () {
    const context = this;
    const args = arguments;
    const tCurr = +new Date();//子作用域時間tag
    clearTimeout(timer);//每次執(zhí)行，先清空定時器，這步操作便是delay時間內(nèi)舍棄多余操作的實現(xiàn)
    if (!tStart) { // 首次給時間tag賦值
      tStart = tCurr; 
    }
    //這層判斷就是判斷是否達(dá)到強(qiáng)制執(zhí)行的條件
    if (mustRunDelay !== 0 && tCurr - tStart >= mustRunDelay) {
      fn.apply(context, args);
      tStart = tCurr;
    } else {
      timer = setTimeout(function () {
        fn.apply(context, args);
      }, delay);
    }
  };
}

忽略throttle的方法名，按照調(diào)用方式不同，他也可以是debounce。主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間tag進(jìn)行比較，用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。還有一點是用了閉包的機(jī)制，便于管理tStart變量，因為閉包的關(guān)系，tStart內(nèi)存不會被回收，否則需要在全局定義該變量。

結(jié)尾

具體怎么用呢，拿scroll事件舉個例子：

window.addEventListenr("scroll",throttle(scrollHandle,delay,mustRunDelay),false);

大概就這意思，使用時候根據(jù)場景使用，mustRunDelay>0？防抖：節(jié)流。

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

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

相關(guān)文章

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

    摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    張紅新 評論0 收藏0

  • 關(guān)于js節(jié)流函數(shù)throttle和防抖動debounce

    摘要：主要實現(xiàn)在于通過異步操作的事件間隔，對于前后兩次調(diào)用方法打時間進(jìn)行比較，用清空定時器的操作實現(xiàn)多余調(diào)用操作的舍棄。 廢話不多說，直奔主題。 什么是throttle和debounce？ 這兩個方法的主要目的多是用于性能優(yōu)化。最常見的應(yīng)用嘗盡就是在通過監(jiān)聽resize、scroll、mouseover等事件時候的性能消耗。拿scroll來說，沒有處理時滑動一次滾動條scroll事件會觸發(fā)多...

    shery 評論0 收藏0

  • 節(jié)流和防抖動

    摘要：起因面試被問到了節(jié)流和防抖動自己對這兩個的概念比較模糊都不知道回答了什么鬼從語文和英語學(xué)起首先先看字面意思節(jié)流的意思就是水龍頭關(guān)小點頻率不要那么高防抖動這根彈簧你不要來回蹦了我就要你最后停下來的沒有發(fā)生形變的那一刻舉個例子節(jié)流在改變窗口大小 起因 面試被問到了節(jié)流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼 從語文和英語學(xué)起 首先, 先看字面意思:節(jié)流(throttl...

    hellowoody 評論0 收藏0

  • JS之節(jié)流和防抖

    摘要：節(jié)流在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對于一定時間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次。總結(jié)以上只是很簡單的寫了一下節(jié)流和防抖的原理，在里，實現(xiàn)起來更加復(fù)雜，但是背后的原理核心就是上邊代碼寫的。 概述 在平時的開發(fā)中，經(jīng)常會聽到兩個差不多很相近的詞。節(jié)流（throttle）和防抖（debounce）。這是兩個類似又有些不同的優(yōu)化方案。 節(jié)流：在指定時間之內(nèi)，讓函數(shù)只觸發(fā)一次。 防...

    fevin 評論0 收藏0

  • 理解節(jié)流和防抖

    摘要：所以針對此類事件則需要進(jìn)行節(jié)流，或者防抖動處理。節(jié)流判斷是否已空閑，如果在執(zhí)行中，則直接函數(shù)節(jié)流二防抖對于一定時間段內(nèi)的連續(xù)的函數(shù)調(diào)用，只執(zhí)行一次原理其實就是一個定時器，當(dāng)我們觸發(fā)一個事件時，讓這個事件延遲一會在執(zhí)行。 在瀏覽器dom事件里面，一些事件會隨著用戶的操作不間斷的觸發(fā)，比如：為一個元素綁定拖拽事件，為頁面綁定resize事件（重新調(diào)整瀏覽器窗口大?。?，頁面滾動。如果dom操...

    zebrayoung 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<