手寫防抖與節流,及其實現原理
阿新 • • 發佈:2020-12-23
防抖(小括號裡為說明)
在規定的時間(wait)內執行被調函式(fn),當高速被呼叫時(小與規定時間),重新開始計算時間(wait),直至在規定時間(wait)內沒有再次被呼叫時,或者最後一次呼叫時,才真正的執行被調函式。
function debounce(fn,wait){
let timer;
return function(){
let context = this;
let args = arguments;
clearTimeout(timer)
timer = null;
timer = setTimeout(function(){
fn.apply(context,args);
clearTimeout(timer);
timer = null;
},wait)
}
}
節流(小括號裡為說明)
在規定的時間(wait)內執行被調函式(fn),當高速被呼叫時(小與規定時間),在規定的時間(wait)後開始第一次執行被調函式(fn),直至結束,再次在規定的時間(wait)後執行被調函式(fn),如此迴圈。
function throttle(fn,wait){
let timer;
return function(){
let context = this;
let args = arguments;
if(!timer){
timer = setTimeout(function(){
fn.apply(context,args);
clearInterval(timer);
timer = null;
},wait)
}
}
}