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

防抖和节流在平时开发过程中用到还是很多的，两种常用的优化前端性能的技术。所以平时的面试过程中也可能会被问到。防抖和节流用于限制事件的触发频率，防止事件处理函数过于频繁地执行，从而提高页面性能和用户体验。

1. 防抖（Debouncing）：

防抖是指在事件被触发后，等待一定的时间间隔（如1000毫秒），如果在这个时间间隔内没有再次触发该事件，那么就执行事件处理函数；如果在这个时间间隔内再次触发了该事件，则重新等待一定的时间间隔。

防抖适用于需要等待一段时间后执行事件处理函数的情况，如搜索框输入时的自动搜索。

2. 节流（Throttling）：

节流是指在一定的时间间隔内，只允许事件处理函数执行一次。即如果在这个时间间隔内多次触发了该事件，只有第一次触发会执行事件处理函数，其他的触发会被忽略。

节流适用于需要控制事件触发频率的情况，如页面滚动时的懒加载图片。

区别：

• 时间点不同： 防抖是在最后一次触发事件后等待一段时间后执行事件处理函数；而节流是在一定的时间间隔内执行事件处理函数。
• 执行频率不同： 防抖在事件频繁触发时，只会执行一次事件处理函数；而节流在一定的时间间隔内会执行多次事件处理函数，但是每次执行的时间间隔是固定的。

如何实现：

防抖实现：

function debounce(func, delay) {
  let timerId;
  return function(...args) {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

节流实现：

function throttle(func, delay) {
  let canRun = true;
  return function(...args) {
    if (!canRun) return;
    canRun = false;
    setTimeout(() => {
      func.apply(this, args);
      canRun = true;
    }, delay);
  };
}

在以上代码中，func是要执行的函数，delay是防抖或节流的时间间隔。调用debounce或throttle函数并传入事件处理函数和时间间隔，返回一个新的函数，用于包裹原事件处理函数。

防抖的使用场景：

节流的使用场景：