实现防抖 debounce 和 节流 throttle ​

scroll 事件本身会触发页面的重新渲染，同时 scroll 事件的 handler 又会被高频度的触发, 因此事件的 handler 内部不应该有复杂操作，例如 DOM 操作就不应该放在事件处理中。

针对此类高频度触发事件问题（例如页面 scroll ，屏幕 resize，监听用户输入等），下面介绍两种常用的解决方法，防抖和节流。

节流和防抖的区别 ​

都是 N 秒内多次执行稀释成一次，节流 throttle 保留第一次，防抖 debounce 保留最后一次。

• 节流(throttle)：保留第一次。高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率
• 防抖(debounce)：保留最后一次。触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间

区别：

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

防抖 debounce ​

连续触发在最后一次执行方法，场景：输入框匹配

const debounce = (fn, time = 1000) => {
  let timeLock = null

  return function (...args) {
    clearTimeout(timeLock)
    timeLock = setTimeout(() => {
      fn(...args)
    }, time)
  }
}

节流 throttle ​

在一定时间内只触发一次，场景：长列表滚动节流

const throttle = (fn, time = 1000) => {
  let flag = true

  return function (...args) {
    if (flag) {
      flag = false
      setTimeout(() => {
        flag = true
        fn(...args)
      }, time)
    }
  }
}