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

資訊專欄INFORMATION COLUMN

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

shery / 930人閱讀

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

廢話不多說(shuō)，直奔主題。

什么是throttle和debounce？

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

throttle

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

debounce

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

原文參考源代碼出處

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

function throttle (fn, delay, mustRunDelay = 0) {
  let timer = null;
  let tStart; //創(chuàng)建父級(jí)作用域時(shí)間tag
  return function () {
    const context = this;
    const args = arguments;
    const tCurr = +new Date();//子作用域時(shí)間tag
    clearTimeout(timer);//每次執(zhí)行，先清空定時(shí)器，這步操作便是delay時(shí)間內(nèi)舍棄多余操作的實(shí)現(xiàn)
    if (!tStart) { // 首次給時(shí)間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。主要實(shí)現(xiàn)在于通過(guò)異步操作的事件間隔，對(duì)于前后兩次調(diào)用方法打時(shí)間tag進(jìn)行比較，用清空定時(shí)器的操作實(shí)現(xiàn)多余調(diào)用操作的舍棄。還有一點(diǎn)是用了閉包的機(jī)制，便于管理tStart變量，因?yàn)殚]包的關(guān)系，tStart內(nèi)存不會(huì)被回收，否則需要在全局定義該變量。

結(jié)尾

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

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

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

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

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

相關(guān)文章

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

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

    張紅新 評(píng)論0 收藏0

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

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

    lieeps 評(píng)論0 收藏0

  • 節(jié)流和防抖動(dòng)

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

    hellowoody 評(píng)論0 收藏0

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

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

    fevin 評(píng)論0 收藏0

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

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

    zebrayoung 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<