原因:
通常綁定響應(yīng)鼠標(biāo)移動(dòng)撵颊、窗口大小調(diào)整铁材、滾屏等事件時(shí)尖淘,綁定的函數(shù)觸發(fā)的頻率會(huì)很頻繁。
若稍處理函數(shù)微復(fù)雜著觉,需要較多的運(yùn)算執(zhí)行時(shí)間和資源村生,往往會(huì)出現(xiàn)延遲,甚至導(dǎo)致假死或者卡頓感饼丘。
目的:
為了優(yōu)化性能趁桃,這時(shí)就很有必要使用debounce
或throttle
了
debounce函數(shù)通常稱為防抖動(dòng)函數(shù),該函數(shù)會(huì)從上一次被調(diào)用后,延遲 wait 毫秒后調(diào)用 fn.
//簡(jiǎn)單實(shí)現(xiàn)
function debounce(fn, wait) {
wait = wait || 0;
let timer;
return function () {
if (timer) {
clearTimeout(timer);
timer= null;
}
timer= setTimeout(function() {
fn();
}, wait);
};
}
throttle節(jié)流函數(shù)卫病,在 wait 秒內(nèi)最多執(zhí)行 fn 一次的函數(shù)油啤。
function throttle( fn ,delay){
delay = delay || 0;
var timer, lastTime = 0;
return function(){
var current = new Date().getTime();
if(current >= lastTime + delay){
fn();
lastTime = current;
}else{
if (timer ) {
clearTimeout(timer );
timer = null;
}
timer = setTimeout(function(){
fn();
},delay)
}
}
}