双剑合璧降龙十八掌，js 防抖和节流初探

前端

2024-01-05 01:23:38

滚动事件优化：防抖与节流

在前端开发中，当用户在页面上快速滚动时，我们经常需要响应滚动事件，比如更新页面上的某些元素。然而，如果我们对滚动事件进行简单的监听，当用户快速滚动时，就会触发大量的滚动事件，这可能会导致页面的性能问题。

为了解决这个问题，我们可以使用防抖和节流来优化滚动事件的处理。防抖和节流都是用来限制函数在一定时间内只执行一次的技巧，但它们的工作原理不同。

防抖

防抖是指在规定的时间内，如果函数被调用多次，那么只有最后一次调用的结果会被执行。这意味着，如果用户在规定的时间内快速滚动多次，那么只有最后一次滚动的结果会被处理。

防抖的原理很简单，我们只需要使用一个计时器来记录最后一次函数被调用的时间。当函数再次被调用时，我们检查计时器是否已经超时。如果超时，那么我们就执行函数。否则，我们就重置计时器，并等待下一次调用。

代码示例：

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

使用示例：

const element = document.querySelector('.element');

const debouncedScrollHandler = debounce((e) => {
  // 处理滚动事件
}, 100);

element.addEventListener('scroll', debouncedScrollHandler);

在这个示例中，我们使用防抖来限制滚动事件在100毫秒内只执行一次。这意味着，如果用户在100毫秒内快速滚动多次，那么只有最后一次滚动的结果会被处理。

节流

节流是指在规定的时间内，函数只会被执行一次，即使函数被调用多次。这意味着，如果用户在规定的时间内快速滚动多次，那么只有第一次滚动的结果会被处理。

节流的原理也比较简单，我们只需要使用一个计时器来记录函数上次被执行的时间。当函数再次被调用时，我们检查计时器是否已经超时。如果超时，那么我们就执行函数。否则，我们就忽略这次调用。

代码示例：

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

使用示例：

const element = document.querySelector('.element');

const throttledScrollHandler = throttle((e) => {
  // 处理滚动事件
}, 100);

element.addEventListener('scroll', throttledScrollHandler);

在这个示例中，我们使用节流来限制滚动事件在100毫秒内只执行一次。这意味着，如果用户在100毫秒内快速滚动多次，那么只有第一次滚动的结果会被处理。

比较

防抖和节流都是用来限制函数在一定时间内只执行一次的技巧，但它们的工作原理不同。防抖会在规定的时间内只执行最后一次函数调用，而节流会在规定的时间内只执行第一次函数调用。

在实际应用中，防抖和节流都可以用来优化滚动事件的处理。防抖可以防止用户快速滚动时触发大量的滚动事件，而节流可以防止用户在页面上快速滚动时错过重要的滚动事件。

选择使用防抖还是节流取决于具体的需求。如果我们需要在用户停止滚动后立即执行函数，那么我们应该使用防抖。如果我们需要在用户滚动时立即执行函数，那么我们应该使用节流。

常见问题解答

1. 防抖和节流有什么区别？

防抖会在规定的时间内只执行最后一次函数调用，而节流会在规定的时间内只执行第一次函数调用。

2. 应该在什么时候使用防抖？

应该在我们需要在用户停止滚动后立即执行函数时使用防抖。

3. 应该在什么时候使用节流？

应该在我们需要在用户滚动时立即执行函数时使用节流。

4. 防抖和节流的代码示例是什么？

防抖：

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

节流：

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