亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

JS throttle與debounce的區(qū)別

wawor4827 / 3578人閱讀

摘要：可以看下面的栗子這個(gè)圖中圖中每個(gè)小格大約，右邊有原生事件與節(jié)流去抖插件的與事件。即如果有連續(xù)不斷的觸發(fā)，每執(zhí)行一次，用在每隔一定間隔執(zhí)行回調(diào)的場(chǎng)景。執(zhí)行啦打印執(zhí)行啦打印執(zhí)行啦節(jié)流按照上面的說(shuō)明，節(jié)流就是連續(xù)多次內(nèi)的操作按照指定的間隔來(lái)執(zhí)行。

一般在項(xiàng)目中我們會(huì)對(duì)input、scroll、resize等事件進(jìn)行節(jié)流控制，防止事件過(guò)多觸發(fā)，減少資源消耗；在vue的官網(wǎng)的例子中就有關(guān)于lodash的debounce方法的使用，當(dāng)時(shí)也提到了throttle，但一直沒(méi)搞明白節(jié)流 throttle 與 去抖 debounce具體區(qū)別在哪里，所以花了點(diǎn)時(shí)間來(lái)搞清楚。

1. 區(qū)別

節(jié)流 throttle 與 去抖 debounce的區(qū)別主要在觸發(fā)時(shí)機(jī)上：

debounce(func, wait, options)：創(chuàng)建并返回函數(shù)的防反跳版本，將延遲函數(shù)的執(zhí)行（真正的執(zhí)行）在函數(shù)最后一次調(diào)用時(shí)刻的wait毫秒之后，對(duì)于必須在一些輸入（多是一些用戶操作）停止之后再執(zhí)行的行為有幫助。將一個(gè)連續(xù)的調(diào)用歸為一個(gè)，如果連續(xù)在wait毫秒內(nèi)調(diào)用，最后只有最后一次會(huì)執(zhí)行

throttle(func, wait, options)：創(chuàng)建并返回一個(gè)像節(jié)流閥一樣的函數(shù)，當(dāng)重復(fù)調(diào)用函數(shù)的時(shí)候，最多每隔指定的wait毫秒調(diào)用一次該函數(shù)；不允許方法在每wait毫秒間執(zhí)行超過(guò)一次，如果連續(xù)在wait毫秒內(nèi)調(diào)用，最后執(zhí)行會(huì)均勻分布在大約每wait一次

對(duì)于lodash來(lái)說(shuō)，throttle是調(diào)用debounce來(lái)實(shí)現(xiàn)的，throttle 和 debounce 最終都會(huì)都會(huì)調(diào)用 debounce 方法。當(dāng)調(diào)用 _.debouncelodash會(huì)返回一個(gè)函數(shù)，這個(gè)函數(shù)在被調(diào)用時(shí)會(huì)生成一個(gè) setTimeout(delayed, delay)。其中 delayed 又是一個(gè)內(nèi)部方法，在 delayed 被調(diào)用時(shí)進(jìn)行如下檢測(cè)：當(dāng)前時(shí)間 - 上次func被調(diào)用事件 是否 小于 0 或 大于 delay ？如果是則執(zhí)行一次 func，記錄并返回執(zhí)行結(jié)果，同時(shí)更新上次被調(diào)用時(shí)間；如果不是則調(diào)用 setTimeout 進(jìn)行下一次的判斷。_.throttle 方法只不過(guò)是多給 debounce 傳了一個(gè) options = {maxWait: $maxWait, leading: true, trailing: true}，這個(gè)選項(xiàng)的意思是至少保證在每 maxWait 時(shí)間讓 func 被調(diào)用一次。

可以看下面的栗子：

這個(gè)圖中圖中每個(gè)小格大約30ms，右邊有原生mouseover事件、lodash與jQuery節(jié)流去抖插件的debounce與throttle事件。
在圖左區(qū)域移動(dòng)鼠標(biāo)時(shí)：對(duì)于debounce，mouseover事件一直沒(méi)有被調(diào)用，直到停下來(lái)才被調(diào)用一次。而throttle是每wait毫秒就調(diào)用一次。

2. 使用場(chǎng)景

debounce:第一次觸發(fā)后，進(jìn)行倒計(jì)wait毫秒，如果倒計(jì)時(shí)過(guò)程中有其他觸發(fā)，則重置倒計(jì)時(shí)；否則執(zhí)行。用它來(lái)丟棄一些重復(fù)的密集操作，直到流量減慢。
throttle:第一次觸發(fā)后先執(zhí)行fn（lodash可以通過(guò){leading: false}來(lái)取消），然后wait ms后再次執(zhí)行，在單位wait毫秒內(nèi)的所有重復(fù)觸發(fā)都被拋棄。即如果有連續(xù)不斷的觸發(fā)，每wait ms執(zhí)行fn一次，用在每隔一定間隔執(zhí)行回調(diào)的場(chǎng)景。

mouse move 時(shí)減少計(jì)算次數(shù)：debounce

input 中輸入文字自動(dòng)發(fā)送 ajax 請(qǐng)求進(jìn)行自動(dòng)補(bǔ)全： debounce

ajax 請(qǐng)求合并，不希望短時(shí)間內(nèi)大量的請(qǐng)求被重復(fù)發(fā)送：debounce

resize window 重新計(jì)算樣式或布局：debounce 或 throttle

scroll 時(shí)觸發(fā)操作，如隨動(dòng)效果：throttle

對(duì)用戶輸入的驗(yàn)證，不想停止輸入再進(jìn)行驗(yàn)證，而是每n秒進(jìn)行驗(yàn)證：throttle

3. 簡(jiǎn)單實(shí)現(xiàn) 3.1 去抖 debounce

按照上面的說(shuō)明，去抖就是連續(xù)多次delay內(nèi)的操作取最后一次操作真正執(zhí)行。

let reduceEvent
function debounce(cb, delay) {
  if (!reduceEvent) {
    reduceEvent = setTimeout(() => {
      cb()
      console.log("執(zhí)行啦！！")
      reduceEvent = null
    }, delay)
  }
}

setTimeout(() => debounce(() => console.log(1), 2000), 1000)         // 打印: 1 執(zhí)行啦！！
setTimeout(() => debounce(() => console.log(2), 2000), 2000)
setTimeout(() => debounce(() => console.log(3), 2000), 2000)
setTimeout(() => debounce(() => console.log(4), 2000), 4000)         // 打印: 4 執(zhí)行啦?。?/pre>
3.2 節(jié)流 throttle

按照上面的說(shuō)明，節(jié)流就是連續(xù)多次delay內(nèi)的操作按照指定的間隔來(lái)執(zhí)行。


function throttle(func, wait = 200) {
  let last = 1
  let timer
  return function(...rest) {
    const now = +new Date()
    if (last && now - last < wait) {
      clearTimeout(timer)
      timer = setTimeout(() => {
        last = now
        func.apply(this, rest)
      }, wait)
    } else {
      last = now
      func.apply(this, rest)
      clearTimeout(timer)
    }
  }
}
const task = throttle(() => console.log(1), 2000)
setTimeout(task, 0)
setTimeout(task, 500)
setTimeout(task, 1000)
setTimeout(task, 2000)                 // 打印: 1 1



網(wǎng)上的帖子大多深淺不一，甚至有些前后矛盾，在下的文章都是學(xué)習(xí)過(guò)程中的總結(jié)，如果發(fā)現(xiàn)錯(cuò)誤，歡迎留言指出~


參考：



lodash


圖解 debounce 與 throttle 的區(qū)別


debounce與throttle區(qū)別


Debouncing and Throttling Explained Through Examples


Debounce and Throttle: a visual explanation





PS：歡迎大家關(guān)注我的公眾號(hào)【前端下午茶】，一起加油吧~




另外可以加入「前端下午茶交流群」微信群，長(zhǎng)按識(shí)別下面二維碼即可加我好友，備注加群，我拉你入群～

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

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

相關(guān)文章

  • throttle與debounce的區(qū)別

    摘要：自己嘗試一下年在的文章中第一次看到的實(shí)現(xiàn)方法。這三種實(shí)現(xiàn)方法內(nèi)部不同，但是接口幾乎一致。如你所見(jiàn)，我們使用了參數(shù)，因?yàn)槲覀冎粚?duì)用戶停止改變?yōu)g覽器大小時(shí)最后一次事件感興趣。 前幾天看到一篇文章，我的公眾號(hào)里也分享了《一次發(fā)現(xiàn)underscore源碼bug的經(jīng)歷以及對(duì)學(xué)術(shù)界拿來(lái)主義的思考》具體文章詳見(jiàn)，微信公眾號(hào)：showImg(https://segmentfault.com/img/b...

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

  • Debounce vs Throttle

    摘要：那么還有最后一個(gè)問(wèn)題，那我之前設(shè)置的定時(shí)器怎么辦呢定時(shí)器執(zhí)行的是這個(gè)函數(shù)，而這個(gè)函數(shù)又會(huì)通過(guò)進(jìn)行一次判斷。 我們?cè)谔幚硎录臅r(shí)候，有些事件由于觸發(fā)太頻繁，而每次事件都處理的話，會(huì)消耗太多資源，導(dǎo)致瀏覽器崩潰。最常見(jiàn)的是我們?cè)谝苿?dòng)端實(shí)現(xiàn)無(wú)限加載的時(shí)候，移動(dòng)端本來(lái)滾動(dòng)就不是很靈敏，如果每次滾動(dòng)都處理的話，界面就直接卡死了。 因此，我們通常會(huì)選擇，不立即處理事件，而是在觸發(fā)一定次數(shù)或一定時(shí)間...

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

  • 【譯】通過(guò)例子解釋 Debounce 和 Throttle

    摘要：舉例舉例通過(guò)拖拽瀏覽器窗口，可以觸發(fā)很多次事件。不支持，所以不能在服務(wù)端用于文件系統(tǒng)事件。總結(jié)將一系列迅速觸發(fā)的事件例如敲擊鍵盤(pán)合并成一個(gè)單獨(dú)的事件。確保一個(gè)持續(xù)的操作流以每毫秒執(zhí)行一次的速度執(zhí)行。 Debounce 和 Throttle 是兩個(gè)很相似但是又不同的技術(shù)，都可以控制一個(gè)函數(shù)在一段時(shí)間內(nèi)執(zhí)行的次數(shù)。 當(dāng)我們?cè)诓僮?DOM 事件的時(shí)候，為函數(shù)添加 debounce 或者 th...

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

  • JS - debounce(去抖) 和 throttle(節(jié)流)

    摘要：多次連續(xù)事件觸發(fā)動(dòng)作最后一次觸發(fā)之后的指定時(shí)間間隔執(zhí)行回調(diào)函數(shù)預(yù)先設(shè)定一個(gè)執(zhí)行周期，當(dāng)調(diào)用動(dòng)作的時(shí)刻大于等于執(zhí)行周期則執(zhí)行該動(dòng)作，然后進(jìn)入下一個(gè)新的時(shí)間周期。 定義 為了避免某個(gè)事件在較短的時(shí)間段內(nèi)（稱為 T）內(nèi)連續(xù)觸發(fā)從而引起的其對(duì)應(yīng)的事件處理函數(shù)不必要的連續(xù)執(zhí)行的一種事件處理機(jī)制（高頻觸發(fā)事件解決方案）debounce：當(dāng)調(diào)用動(dòng)作觸發(fā)一段時(shí)間后，才會(huì)執(zhí)行該動(dòng)作，若在這段時(shí)間間隔內(nèi)又...

    Mike617 評(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ā)多...

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

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

0條評(píng)論

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