防抖
觸發(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('防抖成功');
? ? }
? ? var 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));
