節(jié)流和防抖動

hellowoody 發(fā)布于2019-08-22 15:41 / 3034人閱讀

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

起因

面試被問到了節(jié)流和防抖動, 自己對這兩個的概念比較模糊, 都不知道回答了什么鬼

從語文和英語學起

首先, 先看字面意思:
節(jié)流(throttle)的意思就是水龍頭關小點, 頻率不要那么高
防抖動(debounce), 這根彈簧, 你不要來回蹦了, 我就要你最后停下來的沒有發(fā)生形變的那一刻

舉個例子

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

簡單的實現

雖然上面說了那么多, 但好像還不是很懂怎么用啊, 怎么寫啊? 那就搜搜別人的博客和一些成熟的庫看他們是怎么設計這個函數以及使用的

throttle

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

參數和返回值都知道了, 那就寫吧

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

  return function () {
    const ctx = this
    const args = arguments
    now = new Date().getTime()
    // 如果不是第一次, 并且時間間隔還沒有過去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方法返回一個函數, 這個函數的調用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)
  }
}

應用與實踐

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

其他的參考文章:
分析_的.debounce和.throttle
Debounce 和 Throttle 的原理及實現

GPU云服務器云服務器函數節(jié)流節(jié)流保存字節(jié)流節(jié)流閥

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/93666.html

關于js節(jié)流函數throttle和防抖動debounce

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

張紅新 2019-08-22 16:45 評論0 收藏0
關于js節(jié)流函數throttle和防抖動debounce

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

lieeps 2019-08-29 15:12 評論0 收藏0
關于js節(jié)流函數throttle和防抖動debounce

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

shery 2019-08-02 10:18 評論0 收藏0
JS之節(jié)流和防抖

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

fevin 2019-08-26 17:15 評論0 收藏0
理解節(jié)流和防抖

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

zebrayoung 2019-08-22 16:48 評論0 收藏0