資訊專欄INFORMATION COLUMN
摘要：節(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();//當(dāng)函數(shù)被運(yùn)行，獲取當(dāng)前時間
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é)流在我們不關(guān)心函數(shù)參數(shù)是什么的時候比較有用，比如鼠標(biāo)移動，滾輪事件，我們在乎的是操作的頻率。
防抖在我們關(guān)心高頻事件發(fā)生過后，得到的那個結(jié)果的時候，比較有用，比如用戶迅速輸入完一串用戶名，對其進(jìn)行查重的結(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
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/102038.html
摘要：個人博客原文地址背景我們在開發(fā)的過程中會經(jīng)常使用如等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。 個人博客原文地址 背景 我們在開發(fā)的過程中會經(jīng)常使用如scroll、resize、touchmove等事件，如果正常綁定事件處理函數(shù)的話，有可能在很短的時間內(nèi)多次連續(xù)觸發(fā)事件，十分影響性能。因此針對這類事件要進(jìn)行節(jié)流或者防抖處理 節(jié)流 節(jié)流的意思...
摘要：您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。一些文章中的與上面所談到的設(shè)置類似。防抖防抖技術(shù)允許我們捆綁多個連續(xù)調(diào)用成為單一的一次調(diào)用。防抖的應(yīng)用這個簡單的舉個 歡迎star和watch我的github issue blog，歡迎加入討論。您的支持是我最大的動力，我會保證提供高質(zhì)與清晰的文章與您共同成長。 節(jié)流[throttle]與防抖[debounce]在前...
摘要：節(jié)流和防抖在開發(fā)項(xiàng)目過程中很常見，例如輸入實(shí)時搜索滾動更新了，等等，大量的場景需要我們對其進(jìn)行處理。防抖多次觸發(fā)，只在最后一次觸發(fā)時，執(zhí)行目標(biāo)函數(shù)。節(jié)流限制目標(biāo)函數(shù)調(diào)用的頻率，比如內(nèi)不能調(diào)用次。 節(jié)流和防抖在開發(fā)項(xiàng)目過程中很常見，例如 input 輸入實(shí)時搜索、scrollview 滾動更新了，等等，大量的場景需要我們對其進(jìn)行處理。我們由 Lodash 來介紹，直接進(jìn)入主題吧。 Lod...
摘要：首先重置防抖函數(shù)最后調(diào)用時間，然后去觸發(fā)一個定時器，保證后接下來的執(zhí)行。這就避免了手動管理定時器。 ??之前遇到過一個場景，頁面上有幾個d3.js繪制的圖形。如果調(diào)整瀏覽器可視區(qū)大小，會引發(fā)圖形重繪。當(dāng)圖中的節(jié)點(diǎn)比較多的時候，頁面會顯得異常卡頓。為了限制類似于這種短時間內(nèi)高頻率觸發(fā)的情況，我們可以使用防抖函數(shù)。 ??實(shí)際開發(fā)過程中，這樣的情況其實(shí)很多，比如： 頁面的scroll事件 ...
摘要：節(jié)流分流，與防抖去抖實(shí)現(xiàn)原理相似。本文主要討論節(jié)流，鏡像文章防抖理解，實(shí)踐與實(shí)現(xiàn)。分開討論防抖和節(jié)流，主要是為了讓一些還不太了解節(jié)流防抖的讀者能夠有針對性地，逐一掌握它們。上方為未節(jié)流模式，每一次觸發(fā)都會繪制一個圓點(diǎn)。 showImg(https://segmentfault.com/img/bVbqMwN?w=1280&h=720); 節(jié)流(分流)，與防抖（去抖）實(shí)現(xiàn)原理相似。本文主...
閱讀 1338·2021-09-01 11:40
閱讀 3950·2021-08-05 10:03
閱讀 978·2019-08-30 15:54
閱讀 2820·2019-08-29 12:53
閱讀 3187·2019-08-29 12:23
閱讀 944·2019-08-26 13:45
閱讀 2283·2019-08-26 10:41
閱讀 2540·2019-08-23 16:44
