前端函数防抖与函数节流总结及其使用

函数防抖和函数节流是两种常见的 JavaScript 技术，用于优化事件处理。它们可以防止函数在短时间内被多次调用，从而提高性能并减少不必要的计算。

函数防抖

函数防抖是一种技术，它可以确保函数在一定时间内只被调用一次。这意味着，即使在事件被触发多次的情况下，函数也只会被调用一次。

原理

函数防抖的原理是，在函数被调用时，启动一个计时器。如果在计时器到期之前，函数再次被调用，那么计时器将被重置。这样，函数就只会在大约的调用间隔后执行一次。

实现

函数防抖可以很容易地使用 JavaScript 实现。以下是一个简单的函数防抖的实现：

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

这个函数接受两个参数：要被防抖的函数 func 和等待时间 wait。当 func 被调用时，该函数会启动一个计时器，并在 wait 毫秒后调用 func。如果在 wait 毫秒内 func 被再次调用，那么计时器将被重置，并且 func 将不会被调用。

使用

函数防抖可以用于优化各种事件处理程序。例如，它可以用于优化滚动事件处理程序，以防止页面在滚动时不断地重新渲染。

const handleScroll = () => {
  // Do something
};

window.addEventListener('scroll', debounce(handleScroll, 100));

这段代码中，handleScroll 函数是滚动事件处理程序。它使用 debounce 函数进行防抖，等待时间为 100 毫秒。这意味着，当页面滚动时，handleScroll 函数只会在 100 毫秒后执行一次。

函数节流

函数节流是一种技术，它可以确保函数在一定时间内只被调用一次。这意味着，即使在事件被触发多次的情况下，函数也只会被调用一次。

原理

函数节流的原理是，在函数被调用时，如果函数已经在执行中，那么就忽略这次调用。只有当函数执行完成之后，才会再次允许函数被调用。

实现

函数节流可以很容易地使用 JavaScript 实现。以下是一个简单的函数节流的实现：

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

这个函数接受两个参数：要被节流的函数 func 和等待时间 wait。当 func 被调用时，该函数会检查 isThrottled 变量。如果 isThrottled 为 true，那么函数将不会被调用。否则，函数将被调用，并且 isThrottled 变量将被设置为 true。在 wait 毫秒后，isThrottled 变量将被设置为 false，函数将再次允许被调用。

使用

函数节流可以用于优化各种事件处理程序。例如，它可以用于优化滚动事件处理程序，以防止页面在滚动时不断地重新渲染。

const handleScroll = () => {
  // Do something
};

window.addEventListener('scroll', throttle(handleScroll, 100));

这段代码中，handleScroll 函数是滚动事件处理程序。它使用 throttle 函数进行节流，等待时间为 100 毫秒。这意味着，当页面滚动时，handleScroll 函数只会在 100 毫秒后执行一次。