JavaScript - Debouncing (防抖)

在开发应用程序时，有时限制函数调用以提高 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 (防抖)还可以与游戏控件一起使用，以过滤掉意外的双击或三击。

打印本页