JavaScript - 防抖(Debouncing)

在开发应用程序时，限制函数调用以提高 Web 应用程序性能有时非常重要。防抖(Debouncing)是一种有助于限制函数调用的编程技术。

让我们了解更多关于 JavaScript 中防抖的信息。

什么是防抖(Debouncing)?

防抖(Debouncing)是一种更简单的方法，它可以将特定函数的执行延迟到距离上次执行该函数一定时间后再执行。当我们想要避免不必要的重复函数调用时，使用防抖非常重要。简而言之，它就像一个速率限制器。

例如，当您按下按钮呼叫电梯时，它会记录该事件。此后，当您在短时间内多次按下呼叫按钮时，它会忽略按钮的按下，因为多次按下按钮并不能加快电梯的运行速度。

如何在 JavaScript 中实现防抖?

我们可以通过多种方式在 JavaScript 中实现防抖，其中一种方法是使用 setTimeOut() 方法。每当发生任何事件时，它都应该调用一个特定的函数，该函数返回一个新函数，该函数会在一定延迟后执行特定的函数。

让我们通过下面的示例更深入地理解它。

示例

在下面的代码中，当用户点击按钮时，它会调用 debounce() 函数。

debounce() 函数将我们需要执行的函数作为第一个参数，将时间延迟作为第二个参数。

在 debounce() 函数中，我们定义了 timeout 变量来存储计时器的 ID 并返回该函数。在内部函数中，我们获取函数执行调用的上下文和参数。之后，我们清除之前的超时设置，并使用 setTimeOut() 方法设置一个新的计时器。

我们使用 apply() 方法在特定延迟时间后调用该函数。

<html>
<body>
   <h2> JavaScript - Debouncing </h2>
   <div id = "output"> </div>
   <button id = "btn"> Debounce </button>
   <script>
      var output = document.getElementById("output");
      var btn = document.getElementById("btn");
      // 为按钮添加事件监听器
      btn.addEventListener("click", debounce(function () {
         output.innerHTML = "Hello " + new Date().toLocaleTimeString();
      }, 2000));

      // Debounce function
      function debounce(func, wait) {
         // Initialize timeout variable
         var timeout;
         // Return a function
         return function () {
            // 保存函数的上下文和参数
            var context = this,
            args = argument;
            // 清除超时
            clearTimeout(timeout);
            // 设置超时
            timeout = setTimeout(function () {
               // 调用函数
               func.apply(context, args);
            }, wait);
         };
      }
   </script>
</body>
</html>

输出

在上面的输出中，尝试在 2 秒内多次点击按钮。它只会执行一次该函数。

防抖的好处

防抖有很多好处。这里，我们介绍了其中的一些。

• 防抖通过速率限制来提高 Web 应用程序的性能。

• 它通过在一定时间内发出有限数量的请求来降低服务器负载。

• 它通过提高 Web 应用程序的性能来增强用户体验。

• 它可以防止不必要的 API 调用，从而降低成本。

防抖的实际用例

这里，我们介绍了一些防抖的实际用例。

• 防抖可以与搜索框一起使用。它仅在用户暂停输入时才向服务器发出请求，从而减少 API 请求。

• 它可以与无限滚动和延迟加载一起使用。开发者可以了解用户何时停止滚动，仅获取所需数据并加载它们。

• 防抖功能还可以与游戏控件一起使用，以过滤意外的双击或三击。