前言

JavaScript中“防抖”和“节流”详解及其实际应用

在现代JavaScript应用程序中，处理快速连续触发的事件至关重要。为了优化用户体验并防止不必要的资源浪费，我们经常用到两种技术：“防抖”和“节流”。在这篇文章中，我们将深入探讨这两种技术的原理和实际应用。

定义：

防抖是一种技术，它将在指定时间段内只执行一次给定的函数。如果在此时间段内函数被多次触发，则只执行最后一次触发。

原理：

防抖通过使用一个定时器实现。当函数被触发时，它会启动一个定时器。如果在定时器超时之前函数再次被触发，则重置定时器。只有当定时器超时后，函数才会执行。

应用场景：

• 优化搜索输入框，防止在用户每次键入时都发送请求。
• 处理窗口调整事件，只在调整完成后执行函数。
• 防止快速连续点击按钮时触发多次操作。

定义：

节流是一种技术，它将在给定的时间间隔内最多执行一次函数。无论函数被触发多少次，它都会在该时间间隔内只执行一次。

原理：

节流也使用定时器实现。当函数被触发时，它会启动一个定时器。如果在定时器超时之前函数再次被触发，则不会重置定时器。只有当定时器超时后，函数才会执行。

应用场景：

• 限制滚动事件的触发频率，防止过快的滚动导致页面卡顿。
• 控制图像加载，防止过多并发请求导致浏览器崩溃。
• 处理动画，确保动画以恒定的帧速率运行。

特性	防抖	节流
执行频率	最多一次	固定时间间隔一次
时机	最后一次触发后	固定时间间隔后
应用场景	快速连续触发	固定时间间隔触发

防抖：

const debounce = (func, wait) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func(...args), wait);
  };
};

节流：

const throttle = (func, wait) => {
  let lastCallTime = 0;
  return (...args) => {
    const now = new Date().getTime();
    if (now - lastCallTime < wait) return;
    lastCallTime = now;
    func(...args);
  };
};

“防抖”和“节流”是优化JavaScript应用程序中事件处理的重要技术。了解它们的原理和应用场景对于提高用户体验和性能至关重要。通过合理使用这两种技术，我们可以创建更加流畅、高效的应用程序。