防抖
觸發(fā)高頻事件后n秒內(nèi)函數(shù)只會(huì)執(zhí)行一次达布，如果n秒內(nèi)高頻事件再次被觸發(fā)庶诡，則重新計(jì)算時(shí)間
- 思路
每次觸發(fā)事件時(shí)都取消之前的延時(shí)調(diào)用方法
function debounce(fn) {
let timeout = null; //創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
return function () {
clearTimeout(timeout); //每當(dāng)用戶輸入的時(shí)候把前一個(gè) setTimeout clear 掉
timeout = setTimeout(() => { // 然后又創(chuàng)建一個(gè)新的 setTimeout芬沉，這樣就能保證輸入字符后的 interval 間隔內(nèi)如果還有字符輸入的話雌团，就不會(huì)執(zhí)行 fn 函數(shù)
fn.apply(this, arguments);
}, 500);
};
}
function sayHi() {
console.log('防抖成功');
}
let inp = document.getElementById('inp');
inp.addEventListener('input', debounce(sayHi)); // 防抖
節(jié)流
高頻事件觸發(fā)此疹，但在n秒內(nèi)只會(huì)執(zhí)行一次僧诚，所以節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率
- 思路
每次觸發(fā)事件時(shí)都判斷當(dāng)前是否有等待執(zhí)行的延時(shí)函數(shù)
function throttle(fn) {
let canRun = true; // 通過閉包保存一個(gè)標(biāo)記
return function() {
if (!canRun) return; // 在函數(shù)開頭判斷標(biāo)記是否為true遮婶，不為true則return
canRun = false; // 立即設(shè)置為false
setTimeout(() => { // 將外部傳入的函數(shù)的執(zhí)行放在setTimeout中
fn.apply(this, arguments);
// 最后在setTimeout執(zhí)行完畢后再把標(biāo)記設(shè)置為true（關(guān)鍵）表示可以執(zhí)行下一次循環(huán)了。當(dāng)定時(shí)器沒有執(zhí)行的時(shí)候標(biāo)記永遠(yuǎn)是false湖笨，在開頭被return掉
canRun = true;
}, 500);
};
}
function sayHi(e) {
console.log(e.target.innerWidth, e.target.innerHeight);
}
window.addEventListener('resize', throttle(sayHi));
這里原文旗扑，講的比較細(xì)
https://yuchengkai.cn/docs/frontend/#%E9%98%B2%E6%8A%96
