• 防抖动是将多次执行变为最后一次执行
• 节流是将多次执行变成每隔一段时间执行

设置定时器，并判断当前函数是否需要立即执行，如果需要则立即执行。否则进入正常的防抖逻辑，设置setTimeout定时器，同时缓存这个定时器，在定时器倒计时阶段，判断timer是否为null，如果不为空缓存当前执行上下文，重复调用则重复更新，直到保存到执行的那一刻。如果为空，则开始下一轮的防抖计时

节流

高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率

节流是将多次执行变成每隔一段时间执行

// func是用户传入需要防抖的函数
// wait是等待时间
const throttle = (func, wait = 50) => {
  // 上一次执行该函数的时间
  let lastTime = 0
  return function(...args) {
    // 当前时间
    let now = +new Date()
    // 将当前时间和上一次执行函数时间对比
    // 如果差值大于设置的等待时间就执行函数
    if (now - lastTime > wait) {
      lastTime = now
      func.apply(this, args)
    }
  }
}

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

防抖

触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间

防抖动是将多次执行变为最后一次执行

// func是用户传入需要防抖的函数
// wait是等待时间
const debounce = (func, wait = 50) => {
  // 缓存一个定时器id
  let timer = 0
  // 这里返回的函数是每次用户实际调用的防抖函数
  // 如果已经设定过定时器了就清空上一次的定时器
  // 开始一个新的定时器，延迟执行用户传入的方法
  return function(...args) {
    if (timer) clearTimeout(timer)
    timer = setTimeout(() => {
      func.apply(this, args)
    }, wait)
  }
}