前端之眼：防抖与节流：消除过度繁忙！

2023-10-07 05:20:14

在前端开发中，我们经常会遇到需要处理用户交互的场景，比如单击按钮、滚动页面、输入文本等。这些交互会触发相应的事件，而如果事件触发过于频繁，就会对性能造成影响。

防抖和节流都是为了解决这个问题而生的。它们都是通过延迟执行函数来减少函数调用的次数，从而提高性能。

防抖：抑制高频调用

防抖的原理是：如果在规定时间内函数被多次调用，那么只执行最后一次调用。

以下是防抖函数的实现：

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

使用示例：

const handleClick = () => {
  console.log('Button clicked');
};

const debouncedHandleClick = debounce(handleClick, 500);

document.getElementById('button').addEventListener('click', debouncedHandleClick);

在这个例子中，debounce()函数将handleClick()函数包装起来，并设置了一个500毫秒的等待时间。这意味着，如果用户在500毫秒内多次点击按钮，那么只有最后一次点击会触发handleClick()函数的执行。

节流：限制调用频率

节流的原理是：在规定时间内，只允许函数执行一次。

以下是节流函数的实现：

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

使用示例：

const handleScroll = () => {
  console.log('Window scrolled');
};

const throttledHandleScroll = throttle(handleScroll, 500);

window.addEventListener('scroll', throttledHandleScroll);