深入浅出揭秘函数节流与防抖

前端

2023-10-16 07:20:43

函数节流和函数防抖都是用来控制函数的执行频率的，它们可以防止函数在短时间内被多次触发。函数节流只允许函数在一定时间间隔内执行一次，而函数防抖只允许函数在停止触发一段时间后执行一次。

函数节流

函数节流的原理是使用一个计时器来控制函数的执行。当函数被触发时，计时器会开始计时。如果在计时器结束之前函数又被触发，计时器会重新开始计时。这样，函数只能在计时器结束之后执行一次。

函数节流通常用于处理快速连续的事件，例如滚动事件或键盘事件。通过使用函数节流，我们可以防止函数在短时间内被多次触发，从而提高应用程序的性能。

函数防抖

函数防抖的原理是使用一个计时器来控制函数的执行。当函数被触发时，计时器会开始计时。如果在计时器结束之前函数又被触发，计时器会重新开始计时。这样，函数只能在计时器结束之后执行一次。

函数防抖通常用于处理用户输入事件，例如表单提交事件或搜索事件。通过使用函数防抖，我们可以防止函数在用户输入过程中被多次触发，从而提高应用程序的性能。

函数节流与函数防抖的比较

特征	函数节流	函数防抖
执行时机	在一定时间间隔内只执行一次	在停止触发一段时间后执行一次
使用场景	快速连续的事件	用户输入事件

函数节流与函数防抖的实现

函数节流和函数防抖都可以使用 JavaScript 实现。下面是两个简单的实现示例：

函数节流

function throttle(func, wait) {
  let timer = null;
  return function(...args) {
    if (!timer) {
      timer = setTimeout(() => {
        func.apply(this, args);
        timer = null;
      }, wait);
    }
  };
}

函数防抖

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

函数节流与函数防抖的应用案例

函数节流和函数防抖在前端开发中有很多应用案例。以下是一些常见的应用场景：