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

資訊專(zhuān)欄INFORMATION COLUMN

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

hellowoody / 3045人閱讀

摘要：起因面試被問(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é)流(throttle)的意思就是水龍頭關(guān)小點(diǎn), 頻率不要那么高
防抖動(dòng)(debounce), 這根彈簧, 你不要來(lái)回蹦了, 我就要你最后停下來(lái)的沒(méi)有發(fā)生形變的那一刻

舉個(gè)例子

節(jié)流: 在改變窗口大小的時(shí)候, resize事件會(huì)觸發(fā). 可能窗口大小變化了一下就觸發(fā)了幾十次事件, 但我希望就只觸發(fā)那么十幾次事件 , 這就叫節(jié)流.
防抖動(dòng): 在改變窗口大小的時(shí)候, resize事件會(huì)觸發(fā). 可能窗口大小變化了一下就觸發(fā)了幾十次事件, 但我希望只有在大小改變完(經(jīng)過(guò)一定長(zhǎng)的時(shí)間), 才觸發(fā)一次事件 , 這就叫防抖動(dòng)

簡(jiǎn)單的實(shí)現(xiàn)

雖然上面說(shuō)了那么多, 但好像還不是很懂怎么用啊, 怎么寫(xiě)啊? 那就搜搜別人的博客和一些成熟的庫(kù)看他們是怎么設(shè)計(jì)這個(gè)函數(shù)以及使用的

throttle 
throttle(func, [wait=0])
Creates a throttled function that only invokes func at most once per every wait milliseconds(throttle方法返回一個(gè)函數(shù), 在wait毫秒里, 這個(gè)函數(shù)最多只會(huì)調(diào)用一次func)

參數(shù)和返回值都知道了, 那就寫(xiě)吧

function throttle (func, wait = 0) {
  let timer
  let start
  let now

  return function () {
    const ctx = this
    const args = arguments
    now = new Date().getTime()
    // 如果不是第一次, 并且時(shí)間間隔還沒(méi)有過(guò)去wait毫秒
    if (start && now - start < wait) {
      if (timer) {
        clearTimeout(timer)
      }
      timer = setTimeout (() => {
        func.apply(ctx, args)
        start = now
      }, wait)
    } else {
      func.apply(ctx, args)
      start = now
    }
  }
}
debounce 
debounce(func, [wait=0])
Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked(debounce方法返回一個(gè)函數(shù), 這個(gè)函數(shù)的調(diào)用func的間隔, 至少隔了wait毫秒)
function debounce (func, wait = 0) {
  let timer

  return function () {
    const ctx = this
    const args = arguments
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      func.apply(ctx, args)
    }, wait)
  }
}
應(yīng)用與實(shí)踐

到這里, 單單看代碼的話(huà), throttle和denounce也是賊像. 還是要應(yīng)用多了才能更深入地理解的. 然而自己應(yīng)用上也是淺薄, 還是安利一下別人的文章吧, Debouncing and Throttling Explained Through Examples, 中文翻譯

其他的參考文章:
分析_的.debounce和.throttle
Debounce 和 Throttle 的原理及實(shí)現(xiàn)

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/93666.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)用操作的舍棄。 廢話(huà)不多說(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)用操作的舍棄。 廢話(huà)不多說(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

  • 關(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)用操作的舍棄。 廢話(huà)不多說(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ā)多...

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

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

    摘要：節(jié)流在指定時(shí)間之內(nèi)，讓函數(shù)只觸發(fā)一次。防抖對(duì)于一定時(shí)間段的連續(xù)的函數(shù)調(diào)用，只讓其執(zhí)行一次。總結(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ì)隨著用戶(hù)的操作不間斷的觸發(fā)，比如：為一個(gè)元素綁定拖拽事件，為頁(yè)面綁定resize事件（重新調(diào)整瀏覽器窗口大?。?，頁(yè)面滾動(dòng)。如果dom操...

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

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

0條評(píng)論

閱讀需要支付1元查看
<