JavaScript 节流 (Throttling)

您一定注意到过 Web 应用程序功能的效率，或者 Web 应用程序如何处理用户事件。JavaScript Throttling（节流）或 JavaScript Throttle（节流）概念提供了一种提高应用程序性能和速度的机制。

节流机制也称为节流方法，是一种在首次由该函数触发事件后，在固定时间间隔内执行函数的​​方式。

在本教程中，我们将讨论节流的概念、用例及其如何提高应用程序性能。我们还将讨论如果不使用节流的情况。我们还将探讨在应用程序中实现节流的不同方法。此外，还有许多开源库提供节流实用函数，我们也将讨论它们。那么，让我们开始了解什么是节流以及为什么我们需要这个概念。

我们将讨论以下主题

• JavaScript 中的节流是什么？
• 为什么要在 JavaScript 中使用节流？
• JavaScript 中的节流是如何工作的？
• 节流的用例
• 节流与去抖动的区别

JavaScript 中的节流是什么？

JavaScript 节流是一种机制，它允许函数执行有限次数，之后将阻止其执行。它还可以阻止函数在最近被调用时执行。它还决定了恒定的执行速率。这是一种用于 Web 开发的实践，用于提高应用程序性能并防止意外的重新渲染。

节流的一个绝佳示例是，假设您开发了一个包含许多正在进行的锦标赛的游戏应用程序，但您希望用户每小时只能加入一次比赛。那么，您可以使用节流机制限制该特定用户的比赛访问。如果用户在过去一个小时内触发过该事件，我们可以拒绝他的请求。无论他尝试请求多少次，节流机制都会反复阻止他，直到定义的时限完成。

这被称为节流。我们在一段时间内（在此案例中为一小时）对函数的执行进行速率限制，以便允许用户参加比赛。

为什么要在 JavaScript 中使用节流？

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

节流函数以固定的时间间隔率生成函数的调用，防止应用程序滞后或过载应用程序。因此，服务器将顺序且以固定时间响应请求。

JavaScript 中的节流是如何工作的？

让我们看一个例子来理解 JavaScript 和节流的工作原理。让我们考虑一个场景，我们在网页上添加了一个滚动事件监听器，并且它经过定制，当用户滚动时，他会看到一些特定信息。但是，这里的问题是，当用户频繁滚动时，网页很快就会触发数百个事件。为了解决这个问题，我们将对事件进行节流，以便在上次事件发生一秒后才调用事件。这将导致每秒只有一个回调。用户将感受到相同的结果，但计算效率会高得多。

让我们借助下面的示例来理解它。在下面的示例中，我们将使用节流机制来理解节流事件和非节流事件之间的区别。

未使用节流

在下面的示例中，按钮被点击了十次；因此，该函数将被调用十次。这由一个节流函数控制。

Test.html

输出

从上面的输出可以看出，按钮点击了十次，事件就被触发了十次。

现在，看看使用节流方法相同的示例

在上面的示例中，我们使用了 JavaScript 节流方法。

上面的代码指定了一个 ID 为“throt_evt”的按钮。我们正在向按钮添加一个点击事件监听器，当按钮被点击时，该监听器将被触发。

在“myFunction”中，我们接受两个参数。第一个参数是要执行的函数，第二个参数是以毫秒为单位的延迟时间。

在上面的函数中，我们保留了上一次的时间值。如果上一次时间和当前时间之间的差大于指定的延迟时间，则该函数将在该条件下执行。

当点击按钮且延迟时间为 1000 毫秒（1 秒）时，上面的函数将在控制台记录“clicked”消息。

考虑下面的输出

输出

我们可以从上面的输出中看到，如果上一次时间大于 1 毫秒，它就会记录“clicked”。

上述方法称为 JavaScript 节流方法。

节流的用例

节流函数以预定的速率执行函数，并防止应用程序在执行耗时过程或请求时滞后或过载服务器。以下是一些节流函数的常见用例。

在游戏中

在游戏中，玩家需要按按钮来触发任何动作，例如拳击、射击，但在游戏过程中，用户每秒可以按一次按钮，而我们希望每秒以一定速率触发一次动作，那么节流的概念将对此非常有用。

滚动事件监听器

大多数时候，我们使用滚动事件处理程序来指定一些操作并跟踪滚动位置。通常，滚动事件处理程序用于加载或动画某些内容。

为了正确处理这些事件，我们需要限制用户操作，因为如果用户滚动得过于频繁，可能会对应用程序性能产生负面影响。在这种情况下，我们必须遵循节流方法来有效地显示用户数据。

按钮点击监听器

必须对任何特定操作的点击事件实现节流。就像 ATM 机示例一样，有一个固定的交易完成时间。在此之前，我们无法触发任何其他新事件。我们也可以将其应用于 Web 应用程序以限制用户事件，并且回调函数将在一段时间后运行。这将有助于用户显示正确的结果并避免垃圾邮件点击。

指针事件

与其他事件一样，我们也可以在指针事件中实现节流概念。指针事件类似于滚动事件。在这些事件中，用户可能会频繁地将鼠标指针移入移出，事件将每次都被触发，因此我们可以限制指针事件以避免任何意外的输出。

鼠标移动和其他指针事件通常用于跟踪光标位置。我们可以根据当前鼠标位置在网页上设置一些动画。因此，我们可以限制回调调用的大量次数。

API 调用

在 API 调用中限制事件在特定时间内非常重要。API 调用的过度请求可能会影响页面加载时间。因此，在某些情况下，我们希望限制应用程序对外部 API 的调用。

在这种情况下，节流将非常有利。固定 API 调用速率，将避免不必要的服务器请求。

节流与去抖动的区别

去抖动和节流是非常简单但强大的提高应用程序性能的技术。

我们已经讨论了 JavaScript 中的节流。让我们了解什么是去抖动，然后我们将了解它们之间的主要区别。

什么是去抖动

去抖动的核心概念是通过延迟指定的时间来防止不必要的函数调用。确保仅在没有触发新事件时才调用指定的函数。如果用户在指定的延迟时间内触发新事件，计时器将重置。

考虑一个需要调用 API 来获取数据的示例，多次事件触发可能会导致问题。我们可以通过实现具有一定延迟时间的去抖动技术来避免这些问题。

在这种情况下，用户在指定的时间范围内触发事件；函数将重置延迟时间，并等待指定的时间再进行 API 调用。

可以使用 setTimeout() 和 clearTimeout() 函数轻松实现去抖动方法。要实现此方法，函数应以回调函数和延迟作为输入参数。

考虑下面的示例

在上面的示例中，我们可以看到 myFunction 用作回调函数的包装器，以确保它将在默认延迟 1 秒后调用。

因此，去抖动和节流之间的区别是，去抖动会延迟函数的执行一段时间，直到该时间段在没有进一步函数调用的情况下过去；相比之下，节流限制了一个函数在固定时间内被调用的次数。

现在，让我们了解去抖动和节流的一些直接比较。

去抖动 VS 节流

总结

JavaScript 节流是一种机制，它限制函数执行有限次数。它确保函数以固定的间隔执行，无论它被调用了多少次。

相比之下，去抖动是一种不同的方法，用于通过延迟指定的时间来防止不必要的函数调用。