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

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

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函数并传入事件处理函数和时间间隔，返回一个新的函数，用于包裹原事件处理函数。

防抖的使用场景：

1. 搜索框输入： 当用户在搜索框中输入内容时，不希望每输入一个字母就立即触发搜索请求，而是希望等待用户停止输入一段时间后再触发搜索请求，以减少请求次数和提升用户体验。
2. 窗口调整： 当窗口大小调整时，可能会触发resize事件，但频繁调整窗口大小时，可能会导致页面性能下降。使用防抖技术可以确保只有在用户停止调整窗口大小后才执行相关处理逻辑。
3. 提交按钮点击： 当用户点击提交按钮时，可能会触发多次点击事件，而服务器端处理请求可能需要一定时间。使用防抖可以确保只有在用户停止点击按钮一段时间后才真正提交请求。

节流的使用场景：

1. 页面滚动： 当用户滚动页面时，可能会触发scroll事件，但页面滚动时频繁触发事件处理函数可能会导致页面卡顿。使用节流技术可以限制事件处理函数的执行频率，以提升页面性能。
2. 鼠标移动： 当用户移动鼠标时，可能会触发mousemove事件，但频繁触发事件处理函数可能会导致页面性能下降。使用节流技术可以确保只有在一定时间间隔内执行事件处理函数。
3. 按钮点击： 当用户点击按钮时，可能会触发多次点击事件，而按钮点击事件处理函数可能需要一定时间。使用节流可以确保在一定时间间隔内只执行一次点击事件处理函数，以避免多次触发。

原文地址：https://mp.weixin.qq.com/s/uo7JpuWJ5ohfmhYtdwGl7Q