JavaScript 防抖

什么是防抖？

防抖（debouncing）是一种延迟特定函数执行直到最后一次调用后的一段时间的技术。当希望避免不必要的重复函数调用时，使用防抖技术是很重要的。简而言之，它充当速率限制器。

例如，当你按下电梯呼叫按钮时，系统会记录这个事件。此后，如果你在短时间内多次按下呼叫按钮，系统会忽略这些额外的按键操作，因为多次按压按钮并不会使电梯更快到达。

如何在 JavaScript 中实现防抖？

我们可以在 JavaScript 中以不同的方式实现防抖技术，但一种方法是使用 setTimeout() 方法。每当某个事件发生时，它应该调用一个特定的函数，该函数返回一个新的函数，在一定延迟后执行特定的操作。

下面通过一个例子来深入了解这一点。

示例

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

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

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

我们使用 apply() 方法在特定的延迟之后调用函数。

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

      // 防抖函数
      function debounce(func, wait) {
         // 初始化计时器变量
         var timeout;
         // 返回一个函数
         return function () {
            // 保存函数的上下文和参数
            var context = this,
                args = arguments;
            // 清除计时器
            clearTimeout(timeout);
            // 设置新的计时器
            timeout = setTimeout(function () {
               // 调用函数
               func.apply(context, args);
            }, wait);
         };
      }
   </script>
</body>
</html>

输出

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

防抖的好处

防抖技术有许多好处。这里列举了一些：

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

防抖的实际应用场景

这里列举了一些防抖技术在实际应用中的使用案例：

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