JS 防抖和节流：一劳永逸解决函数连续触发问题

前端

2023-10-31 03:45:06

防抖与节流的区别

防抖和节流都是用来解决函数连续触发的问题，但它们的工作方式不同。

防抖：防抖会延迟函数的执行，直到一段时间内没有新的调用发生。如果在延迟期间有新的调用发生，则重置延迟计时器。这确保了函数只会被执行一次，即使它被连续触发多次。
节流：节流会限制函数在一段时间内只能执行一次。如果在限制期间有新的调用发生，则会被忽略。这确保了函数在一段时间内只会被执行一次，即使它被连续触发多次。

如何实现防抖和节流

防抖和节流都可以通过 JavaScript 实现。以下是两种实现方式：

1. 使用 setTimeout() 实现

这是最简单的方法来实现防抖和节流。

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

// 节流
function throttle(func, delay) {
  let timer;
  return function() {
    const args = arguments;
    if (!timer) {
      func.apply(this, args);
      timer = setTimeout(() => {
        timer = null;
      }, delay);
    }
  };
}

2. 使用 requestAnimationFrame() 实现

requestAnimationFrame() 是一个高性能的 API，它可以让你在浏览器刷新之前执行动画。它也可以用来实现防抖和节流。

// 防抖
function debounce(func, delay) {
  let requestId;
  return function() {
    const args = arguments;
    if (requestId) {
      cancelAnimationFrame(requestId);
    }
    requestId = requestAnimationFrame(() => {
      func.apply(this, args);
    });
  };
}

// 节流
function throttle(func, delay) {
  let requestId;
  return function() {
    const args = arguments;
    if (!requestId) {
      func.apply(this, args);
      requestId = requestAnimationFrame(() => {
        requestId = null;
      });
    }
  };
}