在 JavaScript 中，什么是 Debounce？

在本文中，我将涵盖 JavaScript 中有趣的主题之一，即 Debounce Function（防抖函数），并与你分享如何使用它来提高应用程序性能。

从头开始实现一个 debounce 函数是一个常见的面试问题，它测试了你对中级和高级 JavaScript 概念的理解，例如异步编程、回调、作用域和闭包。

它也是在现实世界的应用程序中使用的一种实用解决方案，以提高性能，并证明你理解编写面向实际用户的好代码的工具。

Debouncing（防抖） 是一种编程模式或技术，它通过延迟函数的执行时间，以避免不必要的 CPU 周期和 API 调用，从而限制频繁调用耗时函数，并提高性能。

Debounce 函数是一个 高阶函数，它返回另一个函数，以在函数参数（func、timeout）和计时器变量周围创建闭包。

常见的用例是搜索框建议、文本字段自动保存和消除双按钮点击。

实现

假设你想显示搜索查询的建议，但仅在访问者完成输入后才显示它。

以下是 debounce 的实现，它返回一个函数，只要它继续被调用，就不会被触发。在不再被调用 500 毫秒后，该函数将被调用。

在 debounce 函数中，我们采用两个参数，第一个是函数，第二个是延迟时间或超时时间。然后，我们初始化了 debounceTimer，用于跟踪延迟周期。

当用户输入第一个字母并释放键时，debounce 首先使用 clearTimeout(timer) 重置计时器。此时，该步骤不是必需的，因为尚未安排任何任务。然后它计划提供的函数 fetchResults() 在 500 毫秒后调用。

但是，假设访问者继续输入，因此每次释放键都会再次触发 debounce。每次调用都需要重置计时器，或者换句话说，取消以前的计划（使用 fetchResults()），并为新时间（未来 500 毫秒）重新安排它。只要访问者在 500 毫秒内持续击键，就会继续进行。

最后一次计划不会被清除，因此最终将调用 fetchResults()。

我们的 fetchResults 将参数 (...args) 扩展到允许 debounce 函数接收要传递给回调的任意数量的参数。

debounce() 函数可用于输入、按钮和窗口事件，如滚动。

按钮：

<button onclick="processChange()">Click me</button>

窗口事件：

window.addEventListener("scroll", processChange);

感谢你的阅读！

在 JavaScript 中，什么是 Debounce？