防抖与节流：让 JavaScript 响应更加顺畅

2023-11-11 06:41:52

防抖与节流的原理

防抖

防抖是一种技术，它可以防止函数在短时间内被重复触发。防抖的原理是：当一个事件被触发时，先启动一个计时器。如果在这个计时器结束之前，事件再次被触发，则重新启动计时器。只有当计时器结束时，才会执行函数。

防抖的目的是为了防止函数在短时间内被重复触发，从而避免不必要的计算或操作。例如，在文本输入框中，如果用户在输入时不断触发一个函数来更新输入内容，则可能会导致性能问题。使用防抖技术可以防止函数在用户输入时被重复触发，只有当用户停止输入一段时间后，才会执行函数。

节流

节流是一种技术，它可以限制函数在指定的时间间隔内只执行一次。节流的原理是：当一个事件被触发时，先检查上一次函数执行的时间。如果当前时间与上一次函数执行的时间差小于指定的时间间隔，则不执行函数。只有当当前时间与上一次函数执行的时间差大于或等于指定的时间间隔时，才会执行函数。

节流的目的是为了限制函数在指定的时间间隔内只执行一次，从而避免不必要的计算或操作。例如，在滚动事件中，如果用户不断滚动页面，则可能会触发一个函数来更新页面内容。使用节流技术可以限制函数在指定的时间间隔内只执行一次，从而避免不必要的计算或操作。

防抖与节流的区别

防抖和节流都是用于优化事件处理的技术，但它们之间存在一些区别。

防抖防止函数在短时间内被重复触发，而节流限制函数在指定的时间间隔内只执行一次。
防抖在事件触发后启动一个计时器，只有当计时器结束时才会执行函数。而节流在事件触发时检查上一次函数执行的时间，只有当当前时间与上一次函数执行的时间差大于或等于指定的时间间隔时，才会执行函数。
防抖适用于需要在一段时间后执行函数的情况，例如文本输入框中的输入内容更新。而节流适用于需要限制函数在指定的时间间隔内只执行一次的情况，例如滚动事件中的页面内容更新。

防抖与节流的 JavaScript 实现

在 JavaScript 中，可以使用以下代码实现防抖：

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

可以使用以下代码实现节流：

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