JavaScript - 防抖

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

让我们进一步了解 JavaScript 中的防抖。

什么是防抖？

防抖是一种更简单的方法，用于延迟特定函数的执行，直到自上次执行该函数以来经过了一定时间。当我们想要避免不必要的重复函数调用时，使用防抖非常重要。简而言之，它充当速率限制器。

例如，当您按下按钮呼叫电梯时，它会注册该事件。之后，当您在短时间内多次按下呼叫按钮时，它会忽略按钮按下，因为电梯无法通过多次按下按钮来更快地到达。

如何在 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");
      // Add event listener to button
      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 () {
            // Save the context and arguments of the function
            var context = this,
            args = arguments;
            // Clear the timeout
            clearTimeout(timeout);
            // Set the timeout
            timeout = setTimeout(function () {
               // Call the function
               func.apply(context, args);
            }, wait);
         };
      }
   </script>
</body>
</html>

输出

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

防抖的优势

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

防抖通过速率限制提高了 Web 应用程序的性能。
它通过在特定时间段内发出有限数量的请求来减少服务器负载。
它通过提高 Web 应用程序的性能来增强用户体验。
它可以防止不必要的 API 调用，从而降低成本。

防抖的实际用例

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

防抖可以与搜索框一起使用。只有当用户暂停输入时，它才会向服务器发出请求，并减少 API 请求。
它可以与无限滚动和延迟加载一起使用。开发人员可以知道用户何时停止滚动，仅获取所需数据并加载它们。
防抖也可以用于游戏控件以过滤掉意外的双击或三击。

打印页面