在开发应用程序时，有时限制函数调用以提高 Web 应用程序性能非常重要。Debouncing (防抖)是一种有助于限制函数调用的编程技术。
让我们更多地了解 JavaScript 中的Debouncing (防抖)。
什么是Debouncing (防抖)？
Debouncing (防抖)是一种更简单的方法，可以将特定函数的执行延迟到自上次执行函数以来经过一定时间。当我们想避免不必要的重复函数调用时，使用 debouncing 是很重要的。简而言之，它用作速率限制器。
例如，当您按下按钮呼叫电梯时，它会注册事件。之后，当您在短时间内多次按下呼叫按钮时，它会忽略按钮按下，因为多次按下按钮无法使电梯更快。
如何在 JavaScript 中实现防抖？
我们可以用不同的方式在 JavaScript 中实现Debouncing (防抖)，但一种方法是使用 setTimeOut（） 方法。每当发生任何事件时，它都应该调用一个返回新函数的特定函数，该函数在一定延迟后执行该特定函数。
让我们通过下面的示例更深入地了解它。
例在下面的代码中，当用户单击按钮时，它会调用 debounce（） 函数。
debounce（） 函数将我们需要执行的函数作为第一个参数，将 time delay 作为第二个参数。
在 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 秒内多次单击该按钮。它只会执行一次函数。
Debouncing (防抖)的好处
Debouncing (防抖)有很多好处。在这里，我们介绍了其中的一些。
- Debouncing (防抖)通过速率限制来提高 Web 应用程序的性能。
- 它通过在一定时间内发出有限数量的请求来减少服务器负载。
- 它通过提高 Web 应用程序的性能来增强用户体验。
- 它可以防止不必要的 API 调用，从而降低成本。
Debouncing (防抖)的实际用例
在这里，我们介绍了一些Debouncing (防抖)的实际用例。
- Debouncing (防抖)可以与搜索框一起使用。仅当用户暂停键入并减少 API 请求时，它才会向服务器发出请求。
- 它可以与无限滚动和延迟加载一起使用。开发人员可以知道用户何时停止滚动，仅获取所需的数据并加载它们。
- Debouncing (防抖)还可以与游戏控件一起使用，以过滤掉意外的双击或三击。
