节流 VS 防抖：减少不必要的函数调用，打造更流畅的用户体验

前端

2023-12-23 13:55:57

防抖：避免不必要的重复触发

防抖（debounce）是一种延迟函数执行的技术，它可以防止函数在短时间内被重复调用。当一个函数被防抖后，它会在一段时间内只执行一次，即使在这个时间段内函数被多次调用。

防抖的实现通常使用计时器来控制函数的执行。当函数被调用时，计时器会启动。如果在计时器结束之前函数再次被调用，计时器会重新启动，从而防止函数被执行。只有当计时器结束时，函数才会被执行。

2. 节流：控制函数的执行频率

节流（throttle）是一种限制函数执行频率的技术，它可以确保函数在一定时间段内只执行一次。当一个函数被节流后，它会在一定时间段内只执行一次，即使在这个时间段内函数被多次调用。

节流的实现通常使用计时器来控制函数的执行。当函数被调用时，计时器会启动。如果在计时器结束之前函数再次被调用，计时器会重新启动，但函数不会被执行。只有当计时器结束时，函数才会被执行。

3. 使用场景

防抖和节流通常用于处理用户输入事件，例如键盘输入、鼠标点击、滚动等。当用户频繁触发这些事件时，防抖和节流可以防止函数被重复调用，从而提高性能和用户体验。

4. 实现方法

在 JavaScript 中，我们可以使用 setTimeout() 和 clearTimeout() 函数来实现防抖和节流。下面是一个防抖函数的实现：

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

下面是一个节流函数的实现：

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