什麼是防抖和節流？有什麼區別？如何實現？

什麼是防抖和節流？有什麼區別？如何實現？

防抖

觸發高頻事件後 n 秒內函數只會執行一次，如果 n 秒內高頻事件再次被觸發，則重新計算時間

思路：

每次觸發事件時都取消之前的延時調用方法

function debounce(fn, delay = 300) {
  let timeout; // 創建一個標記用來存放定時器的返回值
  return function(...arg) {
    clearTimeout(timeout); // 每當用戶輸入的時候把前一個 setTimeout clear 掉
    timeout = setTimeout(() => {
      // 然後又創建一個新的 setTimeout, 這樣就能保證輸入字符後的 interval 間隔內如果還有字符輸入的話，就不會執行 fn 函數
      fn.apply(this, arg);
    }, delay);
  };
}

節流

高頻事件觸發，但在 n 秒內只會執行一次，所以節流會稀釋函數的執行頻率

思路：

每次觸發事件時都判斷當前是否有等待執行的延時函數

基於定時器實現節流函數

function throttle(fn, delay = 300) {
  let timer;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        fn.apply(this, args); // 當函數執行過後才能設置下次定時器
        timer = null;
      }, delay);
    }
  };
}

基於時間實現節流函數

function throttle(fn, delay = 300) {
  let preTime = Date.now();
  return function(...args) {
    let lastTime = Date.now();
    if (lastTime - preTime >= delay) {
      fn.apply(this, args);
      preTime = Date.now();
    }
  };
}