JavaScript 节流 (Debouncing)

在本文中，我们将讨论 JavaScript 的防抖 () 方法及其实现。

什么是防抖？

防抖是一种用于提高浏览器性能的 JavaScript 方法。网页上可能有一些功能需要耗时的计算。如果频繁使用这种类型的方法，可能会极大地影响浏览器的性能，因为 JavaScript 是一个单线程语言。防抖是一种编程技术，可确保耗时活动不会导致网页性能下降。换句话说，防抖方法在调用时不会立即运行。它们会等待预定的时间段，然后才执行。当我们再次调用同一个过程时，前一个过程将被取消，计时器将被重置。

防抖与节流是近亲，它们都可以帮助提高 Web 应用程序的性能。尽管如此，它们的应用场景不同。当我们只考虑最终状态时，可以使用防抖。例如，等待用户输入完成后再检索潜在搜索结果。如果我们希望以受控的速率管理所有中间状态，那么节流是最佳工具。

防抖的实现

让我们通过一个例子来查看防抖方法在程序中的实现。

一个返回另一个函数的更高阶函数称为防抖函数。它用于围绕func 和 wait 函数参数以及timeout 变量创建闭包以保存它们的值。以下变量的定义是：

1. Func：这是我们希望在防抖时间后执行的func 函数。
2. Wait：在最后一次接收到操作后，防抖函数可以等待的时间，直到执行 func。
3. Timeout：timeout 函数是用于指示正在运行的防抖的值。

示例

让我们通过一个例子来理解 JavaScript 中的debouncing() 方法。在下面的示例中，一个按钮连接到一个事件监听器，该监听器会调用一个防抖函数。防抖函数有两个参数：一个函数，另一个是数字（时间）。一个Timer 被声明，顾名思义，它会在一定时间后调用防抖函数。

输出： 执行上述代码后，我们将得到如下输出

正如我们在上面的屏幕截图中看到的，有一个“点击此处”按钮。当按下“点击此处”按钮时，会弹出一个警告框并显示一条警报消息。该功能会更新每次，这意味着如果按钮在延迟时间（4 秒）之前被按下，则初始计时器将被清除，并启动一个新计时器。clearTimeOut() 函数用于完成此任务。

带立即执行函数的防抖函数实现

以下防抖实现返回一个函数，该函数在被调用后不会立即执行。在N 毫秒不活动后，该函数将再次被调用。当使用初始函数作为参数调用函数时，它会立即调用该函数，并在间隔后再次调用它。

当传递一个函数和一个时间间隔时，防抖会返回一个可以传递给函数事件监听器的函数。

示例

让我们通过一个例子来理解带立即执行函数的防抖函数的使用。

输出：执行上述代码后，我们将在下面的屏幕截图中看到所示的输出。

正如我们在上面的屏幕截图中看到的，有一个“防抖”按钮。当我们点击“防抖”按钮时，它会显示一条警报消息。如果我们点击“确定”按钮，警报消息将消失。

应用用途

防抖可用于实现建议文本，我们在其中等待几秒钟以使用户停止输入后再建议文本。因此，我们在每次击键后等待几秒钟后再进行建议。防抖通常用于内容加载网站，如Facebook 和 Twitter，用户会持续滚动。由于视频和图片很多，如果滚动事件触发过于频繁，会对性能产生影响。因此，在滚动情况下必须使用防抖。