函式防抖與函式節流

2021-09-17 02:22:17 字數 2122 閱讀 9144

debounce(防抖):當呼叫動作n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間。比如:如果用手指一直按住乙個彈簧,它將不會彈起直到你鬆手為止。

throttle(節流):預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期。比如:將水龍頭擰緊直到水是以水滴的形式流出,那你會發現每隔一段時間,就會有一滴水流出。

實際上對於window的resize事件,實際需求大多為停止改變大小n毫秒後執行後續處理 (防抖);而其他事件大多的需求是以一定的頻率執行後續處理(節流)。

增加乙個輔助函式 restargs

/**

* 類es6 rest引數的實現,使某個函式具備支援rest引數的能力

* @param func 需要rest引數的函式

* @param startindex 從**開始標識rest引數, 如果不傳遞, 預設最後乙個引數為rest引數

* @returns 返回乙個具有rest引數的函式

*/var restargs = function (func, startindex)

console.log(add.length;) // 2

*/rstartindex = startindex == null ? func.length - 1 : +startindex;

// 返回乙個支援rest引數的函式

return function ()

// 根據rest引數不同, 分情況呼叫函式, 需要注意的是, rest引數總是最後乙個引數, 否則會有歧義

switch (startindex)

var args = array(startindex + 1);

// 先拿到前面引數

for (index = 0; index < startindex; index++)

// 拼接上剩餘引數

args[startindex] = rest;

};};

傳參 immediate 為 true, debounce會在 wait 時間間隔的開始呼叫這個函式 。在類似不小心點了提交按鈕兩下而提交了兩次的情況下很有用。

var debounce = function (func, wait, immediate) ;

var debounced = restargs(function (args) else

return result;

});debounced.cancel = function () ;

return debounced;

};

建立並返回乙個像節流閥一樣的函式,當重複呼叫函式的時候,至少每隔 wait毫秒呼叫一次該函式。對於想控制一些觸發頻率較高的事件有幫助。

預設情況下,throttle將在你呼叫的第一時間盡快執行這個function,並且,如果你在wait週期內呼叫任意次數的函式,都將盡快的被覆蓋。如果你想禁用第一次首先執行的話,傳遞,還有如果你想禁用最後一次執行的話,傳遞。

var throttle = function (func, wait, options) ;

// 建立乙個延後執行的函式包裹住func的執行過程

var later = function () ;

// 返回乙個throttled的函式

var throttled = function ()

// 重新整理最近一次func呼叫的時間點

previous = now;

// 執行func呼叫

// 如果timeout被清空了,

if (!timeout) context = args = null;

} else if (!timeout && options.trailing !== false)

return result;

};// 可以取消函式的節流化

throttled.cancel = function () ;

return throttled;

};

參考文章

函式防抖與函式節流

函式防抖 debounce 當呼叫動作過n毫秒後,才會執行該動作,若在這n毫秒內又呼叫此動作則將重新計算執行時間 函式節流 throttle 預先設定乙個執行週期,當呼叫動作的時刻大於等於執行週期則執行該動作,然後進入下乙個新週期 函式節流 throttle 與函式防抖 debounce 都是為了限...

函式節流與函式防抖

這裡以判斷頁面是否滾動到底部為例,普通的做法就是監聽window物件的scroll事件,然後再函式體中寫入判斷是否滾動到底部的邏輯 這樣做的乙個缺點就是比較消耗效能,因為當在滾動的時候,瀏覽器會無時不刻地在計算判斷是否滾動到底部的邏輯,而在實際的場景中是不需要這麼做的,在實際場景中可能是這樣的 在滾...

函式防抖與函式節流

前言 有一些瀏覽器事件我們不希望它很頻繁的觸發,如調整視窗大小 onresize 監聽滾動條滾動 onscroll 如果這些監聽事件需要呼叫介面的話一秒內可能會呼叫上百次,這樣坑定是有問題的。函式防抖 debounce 如果有人進電梯 觸發事件 那電梯將在10秒鐘後出發 執行事件 這時如果又有人進電...