前端js性能優化 ----節流和防抖

這些是記錄自己寫的代碼，方便以後回查

節流

// func是用戶傳入需要防抖的函數
// wait是等待時間
const throttle = (func, wait = 50) => {
  // 上一次執行該函數的時間
  let lastTime = 0;
  return function() {
    // 當前時間
    let now = +new Date()
    // 將當前時間和上一次執行函數時間對比
    // 如果差值大於設置的等待時間就執行函數
    if (now - lastTime > wait) {
      lastTime = now
      func()
    }
  }
}

setInterval(
  throttle(() => {
    console.log(1)
  }, 500),
  1
);

防抖

// func是用戶傳入需要防抖的函數
// wait是等待時間
const debounce = (func, wait = 50) => {
  // 緩存一個定時器id
  let timer = 0
  // 這裏返回的函數是每次用戶實際調用的防抖函數
  // 如果已經設定過定時器了就清空上一次的定時器
  // 開始一個新的定時器，延遲執行用戶傳入的方法
  return function() {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
        func()；
    }, wait)
  }
}