JavaScript 中节流最简单的解释✨🚀

什么是节流？

节流是一种限制函数在给定时间段内调用频率的技术。它对于提高网页的性能和响应能力非常有用，因为网页的事件监听器会触发繁重或高开销的操作，例如动画、滚动、调整大小、获取数据等。

例如，如果你有一个函数，每次用户滚动页面时都会从 API 获取一些数据，那么你可能希望对其进行限制，使其每秒只发出一个请求，而不是在用户滚动时发出数百个请求。这样，你就可以避免不必要的请求导致服务器或浏览器过载，并减少带宽消耗。

如何在 JavaScript 中实现节流？

在 JavaScript 中实现节流的方法有很多种。一种常见的方法是使用计时器函数setTimeout（例如时间差方法）来包装被节流的函数。计时器函数可用于在调用被节流函数之间强制设置延迟，从而允许该函数在指定时间段内仅被调用一次。

图示：
这里可以看到，一旦函数成功执行，它就会启动一个阻塞延迟计时器，阻止所有点击。延迟时间到后，它会接受点击并执行函数。

以下是如何使用实现节流功能的示例setTimeout：

function throttle(mainFunction, delay) {
  let timerFlag = null; // Variable to keep track of the timer

  // Returning a throttled version 
  return (...args) => {
    if (timerFlag === null) { // If there is no timer currently running
      mainFunction(...args); // Execute the main function 
      timerFlag = setTimeout(() => { // Set a timer to clear the timerFlag after the specified delay
        timerFlag = null; // Clear the timerFlag to allow the main function to be executed again
      }, delay);
    }
  };
}

用例

// Define a function that fetches some data from an API
function fetchData() {
  console.log("Fetching data...");
  // Simulate an API call with a random delay
  setTimeout(() => {
    console.log("Data fetched!");
  }, Math.random() * 1000);
}

// Throttle the fetchData function with a delay of 5000 ms
const throttledFetchData = throttle(fetchData, 5000);

// Add an event listener to the window scroll event that calls the throttledFetchData function
window.addEventListener("scroll", throttledFetchData);

在此示例中，我们定义了一个throttle函数，该函数接受一个callback和一个延迟作为参数。该throttle函数返回一个新函数，该函数callback使用用于创建计时器的逻辑来包装setTimeout。计时器确保回调在指定delay时间段内仅被调用一次。如果在计时器到期之前再次调用返回的函数，则它不会执行任何操作。

然后，我们定义一个fetchData函数，用于模拟具有随机延迟的 API 调用。我们使用该throttle函数创建一个throttledFetchData延迟为 5000 毫秒的函数。我们为调用该throttledFetchData函数的窗口滚动事件添加了一个事件监听器。

如果您运行此代码并滚动页面，您将看到该fetchData 函数每 5 秒仅调用一次，无论您滚动的速度有多快或多慢。

为什么要使用节流？

节流可以通过减少不必要或冗余的操作来提高网页的性能和用户体验。它还可以防止一些问题，例如：

• 请求或计算过多导致服务器或浏览器过载
• 超出 API 或服务的速率限制或配额
• 将带宽或资源浪费在用户不可见或不相关的操作上
• 创建卡顿或滞后的动画或交互

节流的非技术示例：

改变风扇转速
改变风扇转速时，需要几秒钟才能达到所需转速。因此，在再次改变转速之前，我们需要等待几秒钟，直到风扇达到稳定状态。

何时使用节流？

节流适用于以下场景：你想要限制函数的调用频率，但又不想错过任何调用。例如，你可能希望在以下情况下使用节流：

• 当用户滚动、调整大小或输入时从 API 或数据库获取数据
• 当用户滚动、调整大小或移动鼠标时更新或动画页面上的元素
• 当用户操作或事件频繁发生时，记录或跟踪它们

结论

节流是一种限制函数在给定时间段内调用频率的技术。它有助于提升网页的性能和响应速度，因为这些网页的事件监听器会触发繁重或高开销的操作。节流可以在 JavaScript 中使用 setTimeout 或 setInterval 等计时器函数来实现。节流适用于您希望限制函数调用频率，但又不想错过任何调用的场景。

希望这篇博文对您有所帮助，并让您对 JavaScript 中的节流有所了解。您可以点击此处查看我关于JavaScirpt 中 Debouncing 的文章。

如果您有任何疑问或反馈，请随时在下方留言。感谢您的阅读！😊