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

[xiaotiandada]

• 面试官：什么是防抖和节流？有什么区别？如何实现？ febobo/web-interview#83

防抖（Debounce）和节流（Throttle）是常用的用于控制函数执行频率的技术。

防抖：

防抖的目的是确保在频繁触发事件时只执行一次函数，而且是在最后一次触发事件后的一段时间间隔之后执行。
当事件被触发后，会设置一个定时器，在指定的时间间隔内如果再次触发该事件，则会取消之前的定时器并重新设置一个新的定时器。只有当事件停止触发一段时间后，才会执行最后一次触发的函数。
适用场景：输入框搜索，窗口大小调整等需要等待用户停止操作后才执行的场景。
节流：

节流的目的是控制函数执行的频率，确保函数在一定时间间隔内只执行一次。
当事件被触发后，会设置一个定时器，在指定的时间间隔内只能执行一次函数。如果在该时间间隔内再次触发事件，函数不会被执行，直到时间间隔过去后，才能再次执行函数。
适用场景：滚动事件，页面resize等需要控制函数执行频率的场景。
区别：

防抖是在最后一次触发事件后的一段时间间隔后执行函数，而节流是在固定的时间间隔内只执行一次函数。
防抖适用于等待用户停止操作后才执行的场景，而节流适用于控制函数执行频率的场景。
实现防抖和节流的方式有很多，下面是简单的实现示例：

防抖的实现：

function debounce(func, delay) {
  let timer

  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(args)
    }, delay)
  }
}

节流的实现：

function throttle(func, dealy) {
  let timer;

  return (...args) => {
    if (!timer) {
      timer = setTimeout(() => {
        func(args);
        timer = null;
      }, dealy);
    }
  };
}

以上代码中，func 是要执行的函数，delay 是延迟的时间间隔。通过使用闭包保存定时器的引用，以及使用setTimeout和clearTimeout函数来控制函数的执行。