用好函数防抖和函数节流，事件处理更轻松！

前端

2023-11-20 18:24:49

函数防抖和函数节流：优化事件处理性能的利器

在现代前端开发中，我们经常需要处理高频触发的事件，例如输入框输入、鼠标移动或窗口滚动。虽然这些事件对于用户交互至关重要，但如果不加控制地处理，可能会导致性能问题和应用程序卡顿。

为了解决这一挑战，我们介绍了函数防抖和函数节流，这两项强大的技术可以帮助我们优化事件处理性能。

函数防抖

想象一下这样一个场景：用户在输入框中输入文本，并且每键入一个字符，应用程序都会执行某种操作，例如查找建议或验证输入。这种频繁的函数调用会迅速压垮浏览器，导致应用程序性能不佳。

这就是函数防抖派上用场的地方。函数防抖只会在最后一次触发后的一段时间内执行函数。因此，在用户停止输入一段时间后，才会执行查找建议或验证输入的操作。

实现函数防抖很简单，我们可以使用 setTimeout() 函数，如下所示：

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

函数节流

现在，让我们考虑另一个场景：用户正在快速滚动一个长页面，而应用程序不断触发加载更多内容的请求。这种无休止的请求流不仅会浪费带宽，还会显著降低应用程序的响应速度。

这就是函数节流的用武之地。函数节流只会在每次触发后的一段时间内执行函数一次。因此，无论用户滚动多快，加载更多内容的请求只会每隔一段时间发出一次。

实现函数节流同样很简单，我们可以使用 requestAnimationFrame() 函数，如下所示：

function throttle(func, delay) {
  let lastTime = 0;
  return function() {
    const now = Date.now();
    if (now - lastTime < delay) return;
    lastTime = now;
    func.apply(this, arguments);
  }
}