七日打卡 | JS中的防抖与节流

2023-12-28 08:29:14

在JavaScript中，防抖和节流都是非常有用的技术，可以帮助我们优化事件处理，减少不必要的函数调用，从而提高性能。防抖和节流虽然相似，但它们在实现方式和使用场景上却存在着一定的差异。

防抖

防抖，顾名思义，就是在一定时间内只执行一次函数。如果在函数被触发后，在规定时间内又再次触发，那么就会取消上一次的函数调用，只执行最后一次的函数调用。

防抖通常用于处理用户输入的情况。例如，你在搜索框中输入内容时，会触发一个事件。如果你输入的速度很快，那么事件就会被触发很多次。这时，如果直接调用搜索函数，就会导致不必要的函数调用，从而降低性能。为了解决这个问题，我们可以使用防抖技术。

实现防抖的代码如下：

function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;

    clearTimeout(timeout);

    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

使用防抖技术的示例代码如下：

const input = document.getElementById('search-input');

const debouncedSearch = debounce(() => {
  // 这里执行搜索操作
}, 500);

input.addEventListener('input', debouncedSearch);

在这种情况下，当用户在搜索框中输入内容时，会触发一个事件。但是，函数只有在用户停止输入500毫秒后才会被调用。这可以有效地减少不必要的函数调用，从而提高性能。

节流

节流，与防抖不同，它会在一定时间内只执行一次函数。如果在函数被触发后，在规定时间内又再次触发，那么就不会执行函数。

节流通常用于处理高频事件。例如，你在窗口上不停地拖动鼠标时，会触发一个事件。这时，如果直接调用函数，就会导致不必要的函数调用，从而降低性能。为了解决这个问题，我们可以使用节流技术。

实现节流的代码如下：

function throttle(func, wait) {
  let lastCallTime = 0;
  return function () {
    const context = this;
    const args = arguments;

    const now = Date.now();
    const remaining = wait - (now - lastCallTime);

    if (remaining <= 0) {
      func.apply(context, args);
      lastCallTime = now;
    }
  };
}

使用节流技术的示例代码如下：

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

const throttledScroll = throttle(() => {
  // 这里执行某个操作
}, 100);

element.addEventListener('scroll', throttledScroll);

在这种情况下，当用户在元素上拖动鼠标时，会触发一个事件。但是，函数只有在用户停止拖动鼠标100毫秒后才会被调用。这可以有效地减少不必要的函数调用，从而提高性能。