JavaScript - 节流

什么是节流 (Throttling)?

节流 (Throttling) 是一种限制函数在特定时间段内调用次数的技术。它通过实现事件监听器来执行繁重或高开销的任务，例如动画、滚动、调整大小、获取数据等，从而提高网站的速度和响应能力。

例如，如果您有一个函数，每次用户向下滚动页面时都会从 API 收集数据，您可以对其进行节流，使其每秒只发出一个请求，而不是在用户滚动时发出数百个请求。这可以防止不必要的查询导致服务器或浏览器过载，从而减少带宽使用。

为什么在 JavaScript 中使用节流?

JavaScript 节流可以通过设置函数执行速率来提高应用程序性能。

节流函数会按照预先定义的时间间隔生成函数调用，从而防止程序卡顿或过载。因此，服务器将按照特定顺序和预定时间处理请求。

在 JavaScript 中实现节流

以下是在 JavaScript 中创建节流的步骤:

• 创建节流函数:定义一个接受回调和延迟的函数，以随时间调整执行频率。

• 跟踪上次运行时间:保存上次调用函数的时间戳，以查看等待是否已完成。

• 检查时间间隔:对于每个触发器，将当前时间与上次执行时间进行比较;仅在经过足够的时间后才执行。

• 返回受限制的函数:创建一个新函数，该函数仅在达到指定时间段时才执行旧回调。

JavaScript 中的限制如何工作?

让我们看一个例子来更好地理解 JavaScript 和限制。考虑以下场景:我们在网页中添加了一个滚动事件监听器，并将其配置为当用户滚动时，他会看到所需的信息。

但是，如果用户频繁滚动，网页很快就会生成数百个事件。为了解决这个问题，我们将限制该事件，使其仅在前一个事件发生一秒后触发。这将导致每秒只触发一次回调。最终用户将看到相同的结果，但计算效率会更高。

现在，让我们借助下面的示例来理解它。在以下示例中，我们将使用节流机制来区分节流和非节流情况。

无节流函数

如果不进行节流，函数调用速度可能会过快，从而导致性能问题、资源占用过高以及用户体验不佳。

示例

在此示例中，我们为按钮添加了一个事件监听器，但没有进行节流。每次点击都会立即触发回调，并在没有速率限制的情况下向控制台发送"按钮被点击"消息。

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" 
   content="width=device-width, 
   initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <button id="pressButton">Press Me</button>
   <script>
      // 选定具有给定 id 的按钮
      const button = document.
      querySelector("#pressButton");
      
      // 为按钮添加事件监听器
	  // 监听点击事件
      button.addEventListener("click", () => {
         console.log("The button has been pressed");
      });
   </script>
</body>
</html>

输出

这将产生以下结果 -

使用节流函数

节流限制了函数调用的次数。例如，您可以选择每 1500 毫秒最多执行一次函数。这可以防止函数被调用过于频繁，从而提高性能。

示例

在此示例中，我们通过将"按钮已被按下!"日志限制为每 1500 毫秒一次来限制按钮点击事件，无论我们点击的速度有多快。

以下是使用节流函数的简单演示 -

<!DOCTYPE html>
<html lang="en">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" 
      content="width=device-width, 
      initial-scale=1.0">
   <title>Document</title>
</head>

<body>
   <button id="pressButton">Press Me</button>
   <script>
      const button = document.querySelector("#pressButton");

      // 节流函数
      const limitFunctionCall = (callback, waitTime) => {

         // 函数先前调用的时间
         let lastCalled = 0;
         return (...args) => {
            // 函数当前调用时间
            let currentTime = new Date().getTime();

            // 记录差异
            // 先前调用的时间和当前调用的时间之间
            console.log("Time difference:", currentTime - lastCalled, "Wait time:", waitTime);

            // 如果差值大于 waitTime，则再次调用该函数
            if (currentTime - lastCalled > waitTime) {
               lastCalled = currentTime;
               // 返回函数
               return callback(...args);
            }
         }
      }
      button.addEventListener("click",
         limitFunctionCall(() => {
         console.log("Button has been pressed!")
         }, 1500));
    </script>
</body>
</html>

输出

这将生成以下结果 -

[Log] Time difference: - 1729667433711 - "Wait time:" - 1500 (example.html, line 28)
[Log] Button has been pressed! (example.html, line 41)
[Log] Time difference: - 1016 - "Wait time:" - 1500 (example.html, line 28)
[Log] Time difference: - 1599 - "Wait time:" - 1500 (example.html, line 28)
[Log] Button has been pressed! (example.html, line 41)
[Log] Time difference: - 416 - "Wait time:" - 1500 (example.html, line 28)
[Log] Time difference: - 866 - "Wait time:" - 1500 (example.html, line 28)

节流用例

节流功能以固定速率运行，以防止应用在执行耗时任务或请求时出现卡顿或服务器过载。以下是节流功能的一些常见应用。

• 游戏中:在游戏中，玩家按下按钮来执行诸如出拳和射击之类的操作。如果他们按得太快，我们可以使用节流功能来限制操作的频率，例如每秒一次。

• 广告和滚动:当用户滚动时，我们会定期加载内容并进行动画处理。滚动太快会导致应用速度变慢。节流通过限制操作来确保程序平稳运行。

• 按钮点击:某些程序(例如 ATM 机上使用的程序)需要更长时间才能完成任务。节流功能可防止用户过快按下按钮。

• 指针(鼠标)事件:移动鼠标可能会导致事件发生过于频繁。节流功能可控制这些事件发生的频率，以确保一切正常运行。

• API 调用:如果应用快速发出过多的 API 请求，则会降低加载速度。节流功能可以限制请求，从而避免出现问题。

摘要

JavaScript 节流是一种将函数执行次数限制在特定次数的方法。它可确保函数始终以一致的方式执行，无论其被调用了多少次。