函数防抖和节流-搞定操作频繁引起的Web性能下降

前端

2023-09-13 10:43:56

现代 Web 应用程序是高度交互的，用户经常会连续触发多个事件，例如滚动、单击或键盘输入。这些事件可能导致函数被频繁调用，从而导致性能问题。函数防抖和节流就是用来解决这个问题的两种技术。

为什么需要防抖和节流

函数防抖和节流都是为了减少函数在连续调用时的执行次数，从而提高应用程序的性能。这对于以下场景尤其有用：

用户在短时间内触发大量事件，例如连续滚动或快速输入。
函数执行耗时较长，例如执行复杂的计算或网络请求。
函数的执行会对应用程序的性能产生负面影响，例如导致页面卡顿或延迟。

函数防抖

函数防抖（debounce）是一种技术，它可以确保函数在连续调用时只执行一次。也就是说，如果函数在一段时间内被多次调用，那么它只会执行最后一次调用。

函数防抖的原理很简单：它使用一个计时器来跟踪函数的最后一次调用时间。如果在计时器到期之前函数又被调用了，那么计时器将被重置。这样，函数就只会执行最后一次调用。

函数防抖可以很容易地使用 JavaScript 实现。以下是一个简单的示例：

function debounce(func, wait) {
  let timeout;

  return function() {
    const args = arguments;

    clearTimeout(timeout);

    timeout = setTimeout(() => {
      func.apply(this, args);
    }, wait);
  };
}

这个函数接受两个参数：func是要被防抖的函数，wait是要等待的时间（以毫秒为单位）。

函数节流

函数节流（throttle）是一种技术，它可以确保函数在一定时间间隔内只执行一次。也就是说，如果函数在一段时间内被多次调用，那么它只会执行第一次调用和最后一次调用。

函数节流的原理与函数防抖类似，但它使用的是一个不同的计时器。函数节流的计时器在函数被调用后立即启动，并在一段时间后到期。如果在计时器到期之前函数又被调用了，那么计时器将被重置。这样，函数就只会执行第一次调用和最后一次调用。

函数节流也可以很容易地使用 JavaScript 实现。以下是一个简单的示例：

function throttle(func, wait) {
  let lastCall = 0;

  return function() {
    const now = Date.now();

    if (now - lastCall < wait) {
      return;
    }

    lastCall = now;

    func.apply(this, arguments);
  };
}