什么是防抖和节流

防抖

防止抖动，众所周知，在抖动的情况下容易发生高频触发。为了避免这种情况，防抖的核心是延迟执行，当间隔时间大于规定时间，才会触发执行方法。适用场景：实时搜索、拖拽。

节流

节省流量。是指若在规定的间隔时间内仍频繁重复操作，请求方法并不会重新发送，直到中间间隔时间大于规定的间隔时间，才会重新触发请求。适用场景：抢购疯狂点击。

为什么要防抖和节流

防抖和节流是为了防止频繁触发，消耗过多资源，甚至可能导致服务器崩溃的情况出现而提出的解决方案

它们的异同

相同点：

防抖和节流均是为了防止频繁触发、消耗过多资源而提出的解决方法。
防抖和节流的核心思想，均是设定一个规定的空隙时间，只有等待时间超过空隙时间才会请求数据。
防抖和节流的实现均要利用闭包，保护局部变量。

不同点：

防抖是延迟执行，等待时间超过规定时间才会执行。（一定时间后再执行）
节流是立即执行，中间等待时间超过规定时间才会再次执行。（先执行，一定时间内不再执行）

代码实现

防抖

// 防抖-定时器实现
const debounce = (fn, ms = 0) => {
  let timeoutId
  return function(...args) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout( () => fn.apply(this, args), ms)
  }
}
复制代码

节流

// 节流-定时器实现
const throttle = (fn, wait) => {
  let timer = null
  return function() {
    if (!timer) {
      timer = setTimeout(() => {
        timer = null
        fn()
      }, wait)
    }
  }
}


// 节流-时间戳实现
const throttle = (fn, wait) => {
  let updateTime = Date.now()
  return (...args) => {
    const now = Date.now()
    if(now - updateTime > wait) {
      fn.apply(this, args)
      updateTime = now
    }
  }
}
复制代码

总结

防抖：防止抖动，单位时间内事件触发会被重置，避免事件被误伤触发多次。代码实现重在清零 clearTimeout
节流：控制流量，单位时间内事件只能触发一次，如果服务器端的限流即 Rate Limit。代码实现重在开锁关锁 timer=timeout; timer=null
防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行