防抖与节流：JavaScript 性能优化的重要手段

前端

2023-09-25 05:22:16

正文

在 JavaScript 中，防抖和节流是两个常见的性能优化技术。它们可以有效地减少函数的调用次数，从而提高代码的执行效率和用户体验。

防抖（Debouncing）

防抖是指在一定时间间隔内，只执行一次函数。如果在时间间隔内函数被多次调用，那么只有最后一次调用会被执行。

防抖的原理是使用一个计时器。当函数第一次被调用时，计时器启动。如果在计时器到期之前函数又被调用，那么计时器就会被重置。这样，函数就只能在计时器到期后才能被执行。

节流（Throttling）

节流是指在一定时间间隔内，最多执行一次函数。如果在时间间隔内函数被多次调用，那么只有第一次调用会被执行。

节流的原理是使用一个标记。当函数第一次被调用时，标记被设置为 true。如果在标记为 true 的情况下函数又被调用，那么函数就不会被执行。只有当标记为 false 时，函数才会被执行。

防抖和节流的应用场景

防抖和节流都可以在 JavaScript 中的各种场景中使用，比如：

监听窗口大小变化事件
监听滚动事件
监听输入框输入事件
监听按钮点击事件

在这些场景中，如果回调函数是资源占用较大的函数，那么使用防抖或节流可以有效地减少函数的调用次数，从而提高代码的执行效率和用户体验。

防抖和节流的实现方法

防抖和节流都可以使用 JavaScript 实现。下面是两个简单的实现方法：

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

// 节流
function throttle(func, wait) {
  let flag = true;
  return function(...args) {
    if (!flag) {
      return;
    }
    flag = false;
    setTimeout(() => {
      func.apply(this, args);
      flag = true;
    }, wait);
  };
}