掌握防抖和节流，更合理高效地处理前端事件

前端

2023-10-29 18:19:15

在前端开发中，我们经常会遇到需要处理高频触发的事件，如鼠标移动、滚动、窗口大小改变等。如果我们对这些事件的处理函数没有任何限制，可能会导致性能问题和用户体验不佳。

为了解决这个问题，我们可以使用防抖和节流来优化事件处理。防抖和节流都是通过在事件触发后等待一段时间才执行处理函数来达到优化的目的，但它们的工作原理和适用场景有所不同。

防抖（debounce）会在事件触发后等待一段时间，如果在这段时间内事件没有再次触发，则执行处理函数。这样可以防止处理函数被高频触发，提高性能。防抖通常适用于需要在用户停止操作后才执行的事件，如搜索框输入、表单提交等。

节流（throttle）会在事件触发后立即执行处理函数，然后在一段时间内忽略后续的事件触发。这样可以确保处理函数在一定时间内只被执行一次，避免不必要的重复执行。节流通常适用于需要限制处理函数执行频率的事件，如滚动事件、窗口大小改变事件等。

防抖和节流都是非常有用的事件处理技巧，可以帮助我们提高前端应用的性能和用户体验。在实际开发中，我们可以根据不同的场景选择合适的技巧来优化事件处理。

以下是防抖和节流的具体实现方法：

防抖：

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

节流：

function throttle(func, wait) {
  let lastCallTime = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastCallTime >= wait) {
      func.apply(this, args);
      lastCallTime = now;
    }
  };
}

以下是防抖和节流的常见使用场景：

防抖：
- 搜索框输入：在用户停止输入一段时间后才触发搜索。
- 表单提交：在用户点击提交按钮后等待一段时间，如果在这段时间内用户没有再次点击提交按钮，则提交表单。
节流：
- 滚动事件：在用户滚动页面时，每隔一段时间才触发滚动事件处理函数。
- 窗口大小改变事件：在用户调整窗口大小时，每隔一段时间才触发窗口大小改变事件处理函数。

以下是防抖和节流的最佳实践：