JavaScript 函数节流与函数防抖

在前端开发中，经常会遇到需要控制函数触发频率的场景，例如滚动事件、输入框输入事件等。为了优化性能和提升用户体验，我们可以使用函数节流（throttle）和函数防抖（debounce）来限制函数的执行频率。

函数节流

函数节流是指在一段时间内，无论触发多少次函数，都只执行一次。例如，我们在滚动事件中需要执行一个复杂的计算操作，如果不使用函数节流，那么每次滚动都会触发该操作，降低性能。

下面是一个基于时间戳的函数节流实现：

function throttle(func, wait) {
  let lastTime = 0;

  return function() {
    const now = new Date().getTime();
    if (now - lastTime > wait) {
      func.apply(this, arguments);
      lastTime = now;
    }
  };
}

使用方式如下：

const throttledFunc = throttle(myFunction, 1000);
window.addEventListener('scroll', throttledFunc);

上述代码中，myFunction 为需要执行的函数，1000 为设定的节流时间，即1秒钟内只触发一次函数。

函数防抖

函数防抖是指在一段时间内，函数只执行一次，如果在该时间段内又触发了函数，则重新计时。例如，在输入框中实时搜索时，如果输入框每输入一个字符就立即触发搜索函数，会给服务器带来巨大的压力，因此使用函数防抖限制触发频率可以减轻服务器压力。

下面是一个基于定时器的函数防抖实现：

function debounce(func, wait) {
  let timerId = null;

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

使用方式如下：

const debouncedFunc = debounce(myFunction, 500);
input.addEventListener('input', debouncedFunc);

上述代码中，myFunction 为需要执行的函数，500 为设定的防抖时间，即0.5秒内只执行一次函数。

总结

函数节流和函数防抖是优化函数触发频率的常见方法，可以提升页面性能和用户体验。使用函数节流可以限制函数的执行频率，确保某段时间内只执行一次函数；使用函数防抖可以在一段时间内只执行一次函数，有效地控制函数触发的频率。根据具体的需求场景选择合适的方法来限制函数的执行频率，从而提升效率和用户体验。

希望本文能帮助你理解和应用 JavaScript 函数节流与函数防抖。如果有任何疑问或建议，欢迎留言讨论。