什么是防抖和节流？如何实现防抖和节流？

27. 什么是防抖和节流？如何实现防抖和节流？

防抖（debounce）和节流（throttle）是 JavaScript 中常用的两种性能优化方法。

1. 防抖

防抖指的是在事件被触发 n 秒后再执行回调函数，如果在这 n 秒内又触发了该事件，则会重新计时，直到 n 秒后才执行回调函数。防抖通常用于需要在连续事件触发的情况下只执行一次回调函数的场景，比如搜索框输入联想等。

一个简单的防抖实现：

function debounce(fn, wait) {
   
  let timer = null
  return function() {
   
    if(timer)clearTimeout(timer)
    timer = setTimeout(() => {
   
      fn.apply(this, arguments)
    }, wait);
  }
}

2. 节流

节流指的是每隔一段时间就执行一次回调函数，即每隔 n 秒执行一次回调函数。节流通常用于需要控制事件触发频率的场景，比如滚动事件、窗口大小变化等。

一个简单的节流实现：

// 节流 定时器版
function throttle(fn, wait) {
   
  let timer = null
  return function() {
   
    if(!timer) {
   
      timer = setTimeout(() => {
   
        timer = null
        fn.apply(this, arguments)
      }, wait)
    }
  }
}

// 节流 时间戳版
function throttle1(fn, wait) {
   
  let prev = 0
  return function() {
   
    let now = Date.now()
    if(now - prev >= wait) {
   
      fn.apply(this, arguments)
      prev = now
    }
  }
}