Javascript 简明教程
JavaScript - Debouncing
在开发应用程序时，有时确实非常有必要限制函数调用以提高 Web 应用程序的性能。防抖是一种编程技术，有助于限制函数调用。
我们先来详细了解一下 JavaScript 中的防抖。
What is Debouncing?
防抖是一种更简单的延迟特定函数执行的方法，直到从该函数上次执行开始已经过了一定的时间。当我们要避免不必要的重复函数调用时，使用防抖非常重要。简而言之，它的作用是速率限制器。
例如，当你按按钮呼叫电梯时，它会注册该事件。在此之后，如果你在短时间内多次按呼叫按钮，它将忽略按钮按下，因为多次按按钮并不能让电梯更快到来。
How to implement debouncing in JavaScript?
我们可以在 JavaScript 中以不同的方式实现防抖，但一种方法是使用 setTimeOut() 方法。每当发生任何事件时，都应调用特定函数来返回一个新函数，该函数在一定时间的延迟之后执行特定函数。
我们通过下面的示例来更深入地理解它。
Example
在下面的代码中，当用户单击按钮时，它将调用 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 秒内多次单击按钮。它只会执行该函数一次。