前端開發(fā)中谜慌，當(dāng)監(jiān)聽瀏覽器事件時(shí)链峭，如監(jiān)聽鼠標(biāo)移動(dòng)或用戶輸入時(shí)，會(huì)遇到監(jiān)聽函數(shù)短時(shí)間內(nèi)重復(fù)觸發(fā)的問題，這會(huì)帶來不必要的性能開銷杖刷。當(dāng)監(jiān)聽函數(shù)會(huì)發(fā)起異步網(wǎng)絡(luò)請(qǐng)求時(shí)，會(huì)發(fā)起大量的無效請(qǐng)求滑燃。可以對(duì)監(jiān)聽函數(shù)添加debounce(防抖動(dòng))解決這個(gè)問題典予，ts版本的debounce實(shí)現(xiàn)如下：
function deBounce<T>(fn: T, delay: number): () => void {
let timer: NodeJS.Timeout
return function(): void {
const args: any[] = Array.prototype.map.call(arguments, val => val);
if (timer) {
clearTimeout(timer);
}
timer = setTimeout(() => {
typeof fn === 'function' && fn.apply(null, args);
clearTimeout(timer);
}, delay > 0 ? delay : 100);
};
}
總結(jié)
防抖動(dòng)debounce主要解決函數(shù)在短時(shí)間內(nèi)多次觸發(fā)的問題
