寫在前面

此系列來源于開源項(xiàng)目：前端 100 問：能搞懂 80%的請(qǐng)把簡(jiǎn)歷給我
為了備戰(zhàn) 2021 春招
每天一題，督促自己
從多方面多角度總結(jié)答案，豐富知識(shí)
什么是防抖和節(jié)流？有什么區(qū)別？如何實(shí)現(xiàn)？

正文回答

1. 防抖

觸發(fā)高頻事件后 n 秒內(nèi)函數(shù)只會(huì)執(zhí)行一次，如果 n 秒內(nèi)高頻事件再次被觸發(fā)，則重新計(jì)算時(shí)間

簡(jiǎn)單來說：多次觸發(fā)，單位時(shí)間內(nèi)只執(zhí)行一次

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)); // 防抖

2. 節(jié)流

高頻事件觸發(fā)，但在 n 秒內(nèi)只會(huì)執(zhí)行一次，所以節(jié)流會(huì)稀釋函數(shù)的執(zhí)行頻率

簡(jiǎn)單來說：多次觸發(fā)，等到單位時(shí)間到了則執(zhí)行一次

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));

一些解釋

1. 加上 apply 確保 在 sayHi 函數(shù)里的 this 指向的是 input 對(duì)象(不然就指向 window 了，不是我們想要的)。
2. 這里的箭頭函數(shù)依舊是指向 input 對(duì)象
3. 如果傳入的是異步方法

const myThrottle2 = function (func, wait = 50) {
  var canRun = true;
  return function (...args) {
    if (!canRun) {
      return;
    } else {
      canRun = false;
      func.apply(this, args); // 將方法放在外面, 這樣即便該函數(shù)是異步的，也可以保證在下一句之前執(zhí)行
      setTimeout(function () {
        canRun = true;
      }, wait);
    }
  };
};