解锁防抖和节流：提升你的 JavaScript 技能

前端

2023-10-22 09:50:14

当需要处理快速触发的事件时，例如滚动、调整窗口大小或键盘输入，防抖和节流就派上用场了。这些技术通过限制函数调用的频率，避免了不必要的计算和性能开销，从而提升了应用程序的响应能力和用户体验。

防抖

防抖非常适用于只在事件稳定后才需要执行的操作。它会创建一个延迟器，在指定的时间间隔内，只有在事件停止触发后才会执行函数。这对于减少不必要的函数调用非常有用，尤其是在事件触发频率非常高的情况下。

例如，想象一下一个在滚动页面时更新侧边栏菜单的应用程序。如果在每次滚动事件触发时都更新菜单，应用程序可能会变得迟钝，因为浏览器会不断地重新渲染菜单。通过使用防抖，我们可以只在用户停止滚动一定时间后才更新菜单，从而提高性能并改善用户体验。

节流

与防抖不同，节流确保函数在指定的时间间隔内只执行一次，无论事件触发多少次。这对于限制函数的执行频率非常有用，尤其是在需要定期更新状态或执行其他耗时的操作时。

回到侧边栏菜单的示例，如果需要在滚动页面时不断更新菜单，但又不希望菜单更新得太频繁，我们可以使用节流来限制菜单更新的频率。通过设置一个时间间隔，我们可以确保菜单只在一定的时间间隔内更新一次，从而避免了不必要的重新渲染并提升了性能。

实际案例

现在，让我们通过一个实际案例来展示如何将防抖和节流应用到 JavaScript 应用程序中。在下面的示例中，我们将创建一个在页面滚动时向下收起底部按钮，并在停止滚动时向上弹出的按钮。我们将使用防抖和节流来优化按钮的动画效果，以提升用户体验并避免性能问题。

const button = document.getElementById('button');
const scrollThreshold = 50; // 滚动距离阈值

// 防抖：只在滚动停止一定时间后更新按钮位置
const debouncedUpdateButtonPosition = debounce(() => {
  updateButtonPosition();
}, 100); // 延迟时间为 100 毫秒

// 节流：只在滚动时每隔一定时间更新一次按钮位置
const throttledUpdateButtonPosition = throttle(() => {
  updateButtonPosition();
}, 50); // 时间间隔为 50 毫秒

window.addEventListener('scroll', () => {
  debouncedUpdateButtonPosition(); // 在滚动时防抖更新按钮位置
  throttledUpdateButtonPosition(); // 在滚动时节流更新按钮位置
});

function updateButtonPosition() {
  // 更新按钮位置的逻辑
}

// 防抖函数
function debounce(func, wait) {
  let timeout;
  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(() => {
      func.apply(context, args);
    }, wait);
  };
}

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