JS 防抖节流

JS 防抖节流

在前端开发中，我们经常会遇到一些需要频繁触发的事件，比如滚动事件、输入框输入事件等。这些事件如果频繁触发，可能会导致页面性能下降或者不必要的资源消耗。为了解决这个问题，我们可以使用防抖（Debounce）和节流（Throttle）来限制这些事件的执行频率。

防抖（Debounce）

防抖的基本原理是，当事件触发后，不立即执行事件处理函数，而是等待一定时间后执行。如果在这段时间内有新事件触发，就会重新计时。

下面是一个简单的防抖函数的实现：

function debounce(fn, delay) {
  let timer = null;
  return function() {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      fn.apply(this, arguments);
    }, delay);
  };
}

上面的 debounce 函数接受两个参数，一个是要延迟执行的函数 fn，另一个是延迟的时间 delay。当函数被调用时，会先清除之前的定时器，然后设置一个新的定时器，在延迟时间后执行函数。

下面我们来看一个实际的示例，比如一个输入框输入事件的处理：

const input = document.getElementById('myInput');
const handleInput = debounce(function() {
  console.log(input.value);
}, 300);

input.addEventListener('input', handleInput);

上面的代码中，我们给输入框添加了一个输入事件监听器，当用户输入时，会延迟 300ms 执行 console.log(input.value)。

节流（Throttle）

节流的基本原理是，在一定时间间隔内只执行一次事件处理函数。如果在这段时间内有新事件触发，就会被忽略。

下面是一个简单的节流函数的实现：

function throttle(fn, delay) {
  let timer = null;
  let canRun = true;
  return function() {
    if (!canRun) {
      return;
    }
    canRun = false;
    timer = setTimeout(() => {
      fn.apply(this, arguments);
      canRun = true;
    }, delay);
  };
}

上面的 throttle 函数接受两个参数，一个是要延迟执行的函数 fn，另一个是时间间隔 delay。当函数被调用时，如果执行函数的条件满足，就设置一个定时器，在时间间隔后执行函数。

下面我们来看一个实际的示例，比如一个滚动事件的处理：

const handleScroll = throttle(function() {
  console.log('scrolling');
}, 300);

window.addEventListener('scroll', handleScroll);

上面的代码中，我们给 window 元素添加了一个滚动事件监听器，当用户滚动页面时，会在每 300ms 执行一次 console.log('scrolling')。

防抖和节流的选择

在实际开发中，我们需要根据具体的场景来选择使用防抖还是节流。

• 防抖适用于一些频繁触发但只需要执行一次的事件，比如搜索框输入事件。
• 节流适用于一些稀疏触发但需要限制执行频率的事件，比如滚动事件。

另外，有些情况下也可以将防抖和节流结合起来使用，根据具体的需求来进行调整。

总结

防抖和节流是前端开发中常用的性能优化手段，能够有效减少不必要的事件触发和资源消耗。通过合理使用防抖和节流，可以提高页面的性能表现，提升用户体验。