理解節(jié)流與防抖

glumes 發(fā)布于2019-08-23 15:26 / 2039人閱讀

摘要：節(jié)流節(jié)流限制了一個函數(shù)可以在短時間內(nèi)被調(diào)用的次數(shù)。更新防抖防抖確保了一個函數(shù)只有在一個固定時間段內(nèi)沒有被調(diào)用過后，才會再次被調(diào)用。再換句話說防抖會等待事件不再高頻發(fā)生，再觸發(fā)。這個網(wǎng)站很好的可視化了節(jié)流與防抖。

節(jié)流 Throttling

節(jié)流限制了一個函數(shù)可以在短時間內(nèi)被調(diào)用的次數(shù)?？梢赃@樣形容：在一毫秒內(nèi)最多執(zhí)行此函數(shù) 1 次。

Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds."

再換句話說：

節(jié)流會忽略在短時間內(nèi)高頻發(fā)生的事件，只按照計劃好的頻率觸發(fā)。

//fn 要執(zhí)行的函數(shù)
//delay 計劃好的執(zhí)行間隔
//返回一個函數(shù)

function throttled(fn, delay) {
    let lastCall = 0;//初始化lastCall
    return function (...args) {
        const now = (new Date).getTime();//當函數(shù)被運行，獲取當前時間
        if (now - lastCall < delay) {
        
        //這里（now - lastCall）就是間隔時間
           
            return;//如果間隔時間小于計劃好的執(zhí)行間隔，什么也不做。
        }
        lastCall = now; //更新lastCall
        return fn(...args);
    } 
}

防抖 Debouncing

防抖確保了一個函數(shù)只有在一個固定時間段內(nèi)沒有被調(diào)用過后，才會再次被調(diào)用。可以這樣形容：比如說只有在 1 毫秒過后，才允許執(zhí)行這個函數(shù)。

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in "execute this function only if 100 milliseconds have passed without it being called."

再換句話說：

防抖會等待事件不再高頻發(fā)生，再觸發(fā)。

//fn 要執(zhí)行的函數(shù)
//delay 計劃好的等待時間
//返回一個函數(shù)

function debounced(delay, fn) {
  let timerId;
  return function (...args) {
    if (timerId) {//如果正在一個timeout中
      clearTimeout(timerId);//中斷timeout，不會發(fā)生setTimeout的回調(diào)函數(shù)
    }
    timerId = setTimeout(() => {//開始新的timeout
      fn(...args);
      timerId = null;
    }, delay);
  }
}

結(jié)論

節(jié)流在我們不關心函數(shù)參數(shù)是什么的時候比較有用，比如鼠標移動，滾輪事件，我們在乎的是操作的頻率。

防抖在我們關心高頻事件發(fā)生過后，得到的那個結(jié)果的時候，比較有用，比如用戶迅速輸入完一串用戶名，對其進行查重的結(jié)果。

這個網(wǎng)站很好的可視化了節(jié)流與防抖。

參考信息

The Difference Between Throttling and Debouncing

Understanding Throttling and Debouncing

Debouncing and Throttling Explained Through Examples

Throttling and debouncing in JavaScript

云服務器 GPU云服務器 VUE防抖與節(jié)流防抖 VUE防抖函數(shù)節(jié)流

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

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

JavaScript之節(jié)流與防抖

摘要：個人博客原文地址背景我們在開發(fā)的過程中會經(jīng)常使用如等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。個人博客原文地址背景我們在開發(fā)的過程中會經(jīng)常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。因此針對這類事件要進行節(jié)流或者防抖處理節(jié)流節(jié)流的意思...

wayneli 2019-08-23 10:33 評論0 收藏0
The debounce & throttle in Javascript（防抖與節(jié)流）

摘要：您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。一些文章中的與上面所談到的設置類似。防抖防抖技術允許我們捆綁多個連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應用這個簡單的舉個歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。節(jié)流[throttle]與防抖[debounce]在前...

XboxYan 2019-08-23 12:46 評論0 收藏0
淺談節(jié)流與防抖

摘要：節(jié)流和防抖在開發(fā)項目過程中很常見，例如輸入實時搜索滾動更新了，等等，大量的場景需要我們對其進行處理。防抖多次觸發(fā)，只在最后一次觸發(fā)時，執(zhí)行目標函數(shù)。節(jié)流限制目標函數(shù)調(diào)用的頻率，比如內(nèi)不能調(diào)用次。節(jié)流和防抖在開發(fā)項目過程中很常見，例如 input 輸入實時搜索、scrollview 滾動更新了，等等，大量的場景需要我們對其進行處理。我們由 Lodash 來介紹，直接進入主題吧。 Lod...

thursday 2019-08-26 10:17 評論0 收藏0
從lodash源碼學習節(jié)流與防抖

摘要：首先重置防抖函數(shù)最后調(diào)用時間，然后去觸發(fā)一個定時器，保證后接下來的執(zhí)行。這就避免了手動管理定時器。 ??之前遇到過一個場景，頁面上有幾個d3.js繪制的圖形。如果調(diào)整瀏覽器可視區(qū)大小，會引發(fā)圖形重繪。當圖中的節(jié)點比較多的時候，頁面會顯得異?？D。為了限制類似于這種短時間內(nèi)高頻率觸發(fā)的情況，我們可以使用防抖函數(shù)。 ??實際開發(fā)過程中，這樣的情況其實很多，比如：頁面的scroll事件 ...

CloudDeveloper 2019-08-26 11:59 評論0 收藏0
節(jié)流 - 理解，實踐與實現(xiàn)

摘要：節(jié)流分流，與防抖去抖實現(xiàn)原理相似。本文主要討論節(jié)流，鏡像文章防抖理解，實踐與實現(xiàn)。分開討論防抖和節(jié)流，主要是為了讓一些還不太了解節(jié)流防抖的讀者能夠有針對性地，逐一掌握它們。上方為未節(jié)流模式，每一次觸發(fā)都會繪制一個圓點。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 節(jié)流(分流)，與防抖（去抖）實現(xiàn)原理相似。本文主...

layman 2019-08-26 13:41 評論0 收藏0