在 JavaScript 中驾驭函数的防抖 (Debounce) 与节流 (Throttle) 揭秘顺滑高效的编程之道

函数防抖：延迟执行的艺术

函数防抖，顾名思义，就是延迟函数的执行。它在一定时间内只会触发一次函数调用，即使在这个时间内事件被多次触发，函数也只会被执行一次。这对于处理频繁触发的事件非常有用，可以有效防止不必要的重复调用，从而优化性能并提升用户体验。

例如，在输入框中实时搜索功能中，我们通常会监听键盘输入事件，并在每次输入后都触发搜索操作。如果我们不使用防抖，那么即使用户只是在输入框中输入了一个字符，也会触发多次搜索操作，这不仅会增加服务器的负担，还会导致页面卡顿，影响用户体验。

我们可以使用防抖来解决这个问题。通过设置一个延迟时间，只有当用户停止输入一段时间后才会触发搜索操作。这样，即使用户在输入框中快速输入多个字符，也不会触发多次搜索操作，从而大大减少了服务器的负担并提升了用户体验。

在 JavaScript 中，实现函数防抖的方法有很多。其中一种最常用的方法是使用 setTimeout 函数。我们可以创建一个定时器，并在每次事件触发时重置定时器的计时。如果在定时器计时结束之前又发生了事件，那么就会取消前一次的定时器并重新计时。这样，只有当事件在一段时间内没有再发生时，定时器才会计时结束，从而触发函数的执行。

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

const searchFunction = (query) => {
  // 发送搜索请求
};

const debouncedSearch = debounce(searchFunction, 500);

// 在输入框中监听键盘输入事件
document.getElementById('search-input').addEventListener('input', (e) => {
  debouncedSearch(e.target.value);
});

在上面的代码中，我们定义了一个 debounce 函数，它接受两个参数：要防抖的函数和延迟时间。我们使用 setTimeout 函数来创建一个定时器，并在每次键盘输入事件触发时重置定时器的计时。如果在 500 毫秒内没有发生新的键盘输入事件，那么定时器就会计时结束，从而触发搜索函数的执行。

函数节流：限制执行频率的利器

函数节流与函数防抖类似，但它们的目的不同。函数节流是为了限制函数的执行频率，即使在事件频繁触发的情况下，函数也只会在设定的时间间隔内执行一次。这对于处理需要一定时间才能完成的任务非常有用，可以防止不必要的重复调用，从而提升性能并避免不必要的资源浪费。

例如，在页面滚动时，我们通常会监听 scroll 事件，并在每次滚动时更新页面的内容。如果我们不使用节流，那么即使用户只是滚动页面一丁点距离，也会触发多次 scroll 事件，从而导致页面内容频繁更新。这不仅会增加浏览器的负担，还会导致页面卡顿，影响用户体验。

我们可以使用节流来解决这个问题。通过设置一个时间间隔，只有当用户滚动页面达到一定距离后才会触发 scroll 事件的处理函数。这样，即使用户在页面中快速滚动，也不会触发多次 scroll 事件的处理函数，从而大大减少了浏览器的负担并提升了用户体验。

在 JavaScript 中，实现函数节流的方法也有很多。其中一种最常用的方法是使用 requestAnimationFrame 函数。我们可以创建一个循环，并在每次 requestAnimationFrame 函数被调用时检查是否需要触发函数的执行。如果需要，则触发函数的执行；否则，继续等待下一次 requestAnimationFrame 函数被调用。

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

const updatePageContent = () => {
  // 更新页面内容
};

const throttledUpdatePageContent = throttle(updatePageContent, 500);

// 监听页面滚动事件
window.addEventListener('scroll', throttledUpdatePageContent);

在上面的代码中，我们定义了一个 throttle 函数，它接受两个参数：要节流的函数和时间间隔。我们使用 Date.now() 函数来获取当前时间戳，并检查是否已经过了设定的时间间隔。如果已经过了，则触发函数的执行；否则，继续等待下一次 requestAnimationFrame 函数被调用。

防抖与节流的比较

函数防抖和函数节流都是 JavaScript 中非常有用的技巧，它们可以帮助我们优化性能并提升用户体验。但是，它们的使用场景不同。函数防抖适用于那些需要在一定时间内只执行一次的操作，而函数节流适用于那些需要限制执行频率的操作。

下表总结了函数防抖和函数节流的主要区别：

特性	函数防抖	函数节流
目的	延迟执行函数	限制执行频率
实现方法	使用 setTimeout 函数	使用 requestAnimationFrame 函数
使用场景	实时搜索功能、输入框自动完成功能等	页面滚动、窗口调整大小等

总结

函数防抖和函数节流是 JavaScript 中的实用技巧，它们可以帮助我们优化性能并提升用户体验。函数防抖适用于那些需要在一定时间内只执行一次的操作，而函数节流适用于那些需要限制执行频率的操作。通过掌握这些技巧，我们可以编写出更加高效、流畅的 JavaScript 代码，从而为用户提供更好的使用体验。