關於JS中比較常用的函數:節流函數和防抖函數,從概念、使用場景到代碼簡單實現做了一個詳細的區分。希望對你有所幫助。
在寫JS時,這兩個函數比較常見,有時候傻傻分不清用哪個,或者說知道代碼要怎麼寫,但要說出它究竟是節流函數還是防抖函數時一臉楞逼。今天有一個同學分享了這兩個的區分,我也來回顧一下,加深一下印象,以便日後用到時心裏有底。PS:百度和谷歌搜索前幾個介紹都是相反介紹,本文爲原創,如有雷同純屬抄襲我的。
節流概念(Throttle)
按照設定的時間固定執行一次函數,比如200ms一次。注意:固定就是你在mousemove過程中,執行這個節流函數,它一定是200ms(你設定的定時器延遲時間)內執行一次。沒到200ms,一定會返回,沒有執行回調函數的。
主要應用場景有:scroll、touchmove
防抖概念(Debounce)
抖動停止後的時間超過設定的時間時執行一次函數。注意:這裏的抖動停止表示你停止了觸發這個函數,從這個時間點開始計算,當間隔時間等於你設定時間,纔會執行裏面的回調函數。如果你一直在觸發這個函數並且兩次觸發間隔小於設定時間,則一定不會到回調函數那一步。·
主要應用場景有:input驗證、搜索聯想、resize
節流實現
思路: 第一次先設定一個變量true,第二次執行這個函數時,會判斷變量是否true,是則返回。當第一次的定時器執行完函數最後會設定變量爲flase。那麼下次判斷變量時則爲flase,函數會依次運行。
代碼一:首次不執行
function throttle(fn,delay=100){
//首先設定一個變量,在沒有執行我們的定時器時爲null
let timer = null;
return function(){
//當我們發現這個定時器存在時,則表示定時器已經在運行中,需要返回
if(timer) return;
timer = setTimeout(()=>{
fn.apply(this,arguments);
timer = null;
},delay);
}
}
代碼二:首次執行
function throttle2(fn,delay=100){
let last = 0;
return function(){
let curr = +new Date();
if(curr - last > delay){
fn.apply(this,arguments);
last = curr;
}
}
}
防抖實現
思路:首次運行時把定時器賦值給一個變量,第二次執行時,如果間隔沒超過定時器設定的時間則會清除掉定時器,重新設定定時器,依次反覆,當我們停止下來時,沒有執行清除定時器,超過一定時間後觸發回調函數。
代碼一:首次不執行
function debounce(fn,delay=200){
let timer = null;
return function(){
if(timer) clearTimeout(timer);
timer = setTimeout(()=>{
fn.apply(this,arguments);
timer = null;
},delay);
}
}
代碼二:首次執行
function debounce2(fn, delay = 200, atBegin = true) {
let timer = null, last = 0,during;
return function () {
let self = this, args = arguments;
var exec = function () {
fn.apply(self, args);
}
if (atBegin && !timer) {
exec();
atBegin = false;
} else {
during = Date.now() - last;
if (during > delay) {
exec();
} else {
if (timer) clearTimeout(timer);
timer = setTimeout(function () {
exec();
}, delay);
}
}
last = Date.now();
}
}
演示 打開控制檯觀察變化
上面的代碼只是我自己的一個簡單實現,看看lodash裏面的兩個核心實現代碼。生產中建議使用它們的庫,畢竟有這麼多人在用,出bug的機會比較少,我上面的代碼有可能有一些情況沒考慮到。如果你發現有問題的,也請告訴我。
如果在項目中有需要用到的,可以直接安裝單個的NPM模塊。throttle 和 debounce
lodash使用使用文檔
lodash庫裏面這兩個函數設置的參數有點複雜,記錄一下里面的參數和代碼使用。
節流(throttle)
官方文檔解釋:
創建一個節流函數,在 wait 秒內最多執行 func 一次的函數。 該函數提供一個 cancel 方法取消延遲的函數調用以及 flush 方法立即調用。 可以提供一個 options 對象決定如何調用 func 方法, options.leading 與|或 options.trailing 決定 wait 前後如何觸發。 func 會傳入最後一次傳入的參數給這個函數。 隨後調用的函數返回是最後一次 func 調用的結果。
注意: 如果 leading 和 trailing 都設定爲 true 則 func 允許 trailing 方式調用的條件爲: 在 wait 期間多次調用。
如果 wait 爲 0 並且 leading 爲 false, func調用將被推遲到下一個點,類似setTimeout爲0的超時。
參數
func (Function)
要節流的函數
[wait=0] (number)
需要節流的毫秒
[options] (Object)
選項對象
[options.leading=true] (boolean)
指定調用在節流開始前
[options.trailing=true] (boolean)
指定調用在節流結束後
返回值 (Function)
返回節流的函數
示例
// 避免在滾動時過分的更新定位
jQuery(window).on('scroll', _.throttle(updatePosition, 100));
// 點擊後就調用 `renewToken`,但5分鐘內超過1次。
var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
jQuery(element).on('click', throttled);
// 取消一個 trailing 的節流調用
jQuery(window).on('popstate', throttled.cancel);
防抖(debounce)
創建一個 debounced(防抖動)函數,該函數會從上一次被調用後,延遲 wait 毫秒後調用 func 方法。 debounced(防抖動)函數提供一個 cancel 方法取消延遲的函數調用以及 flush 方法立即調用。 可以提供一個 options(選項) 對象決定如何調用 func 方法,options.leading 與 options.trailing 決定延遲前後如何觸發(先調用後等待 還是 先等待後調用)。 func 調用時會傳入最後一次提供給 debounced(防抖動)函數 的參數。 後續調用的 debounced(防抖動)函數返回是最後一次 func 調用的結果。
注意: 如果 leading 和 trailing 選項爲 true, 則 func 允許 trailing 方式調用的條件爲: 在 wait 期間多次調用防抖方法。
如果 wait 爲 0 並且 leading 爲 false, func調用將被推遲到下一個點,類似setTimeout爲0的超時。
參數
<pre>//code from http://caibaojian.com/throttle-debounce.html
`func (Function)
要防抖動的函數
[wait=0] (number)
需要延遲的毫秒數
[options] (Object)
選項對象
[options.leading=false] (boolean)
指定調用在延遲開始前
[options.maxWait] (number)
設置 func 允許被延遲的最大值
[options.trailing=true] (boolean)
指定調用在延遲結束後` </pre>
返回值 (Function)
返回具有防抖動功能的函數
示例
// 避免窗口在變動時出現昂貴的計算開銷。
jQuery(window).on('resize', _.debounce(calculateLayout, 150));
// 當點擊時 `sendMail` 隨後就被調用。
jQuery(element).on('click', _.debounce(sendMail, 300, {
'leading': true,
'trailing': false
}));
// 確保 `batchLog` 調用1次之後,1秒內會被觸發。
var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
var source = new EventSource('/stream');
jQuery(source).on('message', debounced);
// 取消一個 trailing 的防抖動調用
jQuery(window).on('popstate', debounced.cancel);
以上就是節流和防抖的全部介紹