轉載地址:https://segmentfault.com/a/1190000008768202
概念
函數防抖(debounce)
當調用動作過n毫秒後,纔會執行該動作,若在這n毫秒內又調用此動作則將重新計算執行時間
函數節流(throttle)
預先設定一個執行週期,當調用動作的時刻大於等於執行週期則執行該動作,然後進入下一個新週期
函數節流(throttle)與 函數防抖(debounce)都是爲了限制函數的執行頻次,以優化函數觸發頻率過高導致的響應速度跟不上觸發頻率,出現延遲,假死或卡頓的現象。
比如如下的情況:
window對象的resize、scroll事件
拖拽時的mousemove事件
文字輸入、自動完成的keyup事件
區別
可以拿我們平時坐電梯爲例來形象地表述二者的區別
函數防抖:如果有人進電梯(觸發事件),那電梯將在10秒鐘後出發(執行事件監聽器),這時如果又有人進電梯了(在10秒內再次觸發該事件),我們又得等10秒再出發(重新計時)。
函數節流 :保證如果電梯第一個人進來後,10秒後準時運送一次,這個時間從第一個人上電梯開始計時,不等待,如果沒有人,則不運行
實現
函數防抖(debounce)
function _debounce(fn,wait){
var timer = null;
return function(){
clearTimeout(timer)
timer = setTimeout(()=>{
fn()
},wait)
}
}
function _log(){
console.log(1)
}
window.onscroll = _debounce(_log,500)
但是,仔細想想,上面的實現方式還是有一定的缺點。如果頁面很長,我們一直在滾動頁面,那_log方法就一直不會被執行。所以我們可以升級一下上述的防抖方法。
function _debounce(fn,wait,time){
var previous = null; //記錄上一次運行的時間
var timer = null;
return function(){
var now = +new Date();
if(!previous) previous = now;
//當上一次執行的時間與當前的時間差大於設置的執行間隔時長的話,就主動執行一次
if(now - previous > time){
clearTimeout(timer);
fn();
previous = now;// 執行函數後,馬上記錄當前時間
}else{
clearTimeout(timer);
timer = setTimeout(function(){
fn();
},wait);
}
}
}
function _log(){
console.log(1)
}
window.onscroll = _debounce(_log,500,2000)
函數節流(throttle)
function _throttle(fn, time) {
let _self = fn,
timer,
firstTime = true //記錄是否是第一次執行的flag
return function() {
let args = arguments, //解決閉包傳參問題
_me = this //解決上下文丟失問題
if(firstTime) { //若是第一次,則直接執行
_self.apply(_me, args)
return firstTime = false
}
if(timer) { //定時器存在,說明有事件監聽器在執行,直接返回
return false
}
timer = setTimeout(function() {
clearTimeout(timer)
timer = null
_self.apply(_me, args)
}, time || 500)
}
}
function _log(){
console.log(1)
}
window.onscroll = _throttle(_log,500)
趕快打開控制檯運行一下吧~