前端都应该要掌握的防抖和节流

2024-02-18 05:37:51

防抖与节流：前端性能优化必备技能

在前端开发中，我们经常会遇到需要频繁执行的函数，比如滚动事件、键盘事件等。如果这些函数执行过于频繁，可能会导致性能问题。为了解决这个问题，我们可以使用防抖和节流技术来减少函数的执行频率。

防抖

防抖的原理是，在一定时间内，如果函数被多次调用，那么只执行最后一次调用。换句话说，防抖可以防止函数在短时间内被重复调用。

防抖的常见实现方式有两种：

定时器防抖

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

时间戳防抖

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

节流

节流的原理是，在一定时间内，函数只执行一次。换句话说，节流可以保证函数在一定时间内只执行一次。

节流的常见实现方式有两种：

定时器节流

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

时间戳节流

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