什么是去抖动？

性能是构建网站和软件时优先考虑的众多因素之一。作为软件工程师，编写代码时必须考虑性能，因为这将极大地有助于提升软件的整体用户体验。

在本文中，我们将研究 Debouncing，这是一种用于提高客户端应用程序性能的非常有用的技术。

在我们了解什么是去抖动之前，让我们先简单了解一下事件监听器。

事件监听器

在构建客户端应用时，事件监听器是必不可少的。每个客户端应用都需要用户与其交互才能正常运作，这些交互可能是点击按钮、滚动查看更多内容、在输入框中输入内容、提交表单等等。这些事件监听器会触发回调函数，每当它们监听的事件被触发时，回调函数就会触发。

在某些情况下，这些事件监听器会包含性能要求较高的回调函数，因此我们需要控制这些回调函数的调用方式和时间。这时，去抖动 (debouncing) 就派上用场了。

假设我们有一个搜索栏，每当用户更改输入字段时，它都会向 API 发出请求。这意味着，如果用户想要搜索“什么是去抖动？”，浏览器总共需要向该 API 发出 19 个请求。

这是一支代码笔，您可以测试一下。

现在，通过这种方法，我们的浏览器会对用户在键盘上进行的每一次击键发出请求，这会给我们留下多个无用的请求。

我们能不能想个办法，在用户输入完成之前阻止请求？这样能解决问题吗？现在，去抖动（debouncing）就是这么来的。

去抖动

防抖是一种阻止函数运行的方法，直到一段时间内没有调用该函数为止。在我们的例子中，直到用户停止输入后才会发出请求。

实现去抖动后，我们的事件回调将如下所示：

let timeout;
// other codes
inputField.addEventListener('input', () => {
    clearTimeout(timeout);
    timeout = setTimeout(makeRequest, 500);
})

从上面的代码片段中，每当用户输入内容时，我们都会清除一个超时定时器，该定时器在函数最初调用时并不存在。然后，我们使用 创建另一个超时定时器setTimeout，makeRequest每当时间到时，该定时器都会调用该函数。这意味着，如果未超过超时时间且用户输入内容，我们会清除前一个定时器并创建另一个。这样，只有最后一个超时定时器会运行。从而解决了我们多个请求的问题。

这是实施去抖动后的情况：

更有意义，对吧？

如果你想仔细看看实现过程，这里有一个 codepen

额外的东西

我们不必在每次想要实现这个惊人的功能时手动编写去抖动函数，只需创建一个接受回调和计时器的实用函数，然后返回一个具有整个去抖动功能的函数即可。

像这样：

function debounce(func, timeINMS) {
  let timeout;

  return function () {
    clearTimeout(timeout);
    timeout = setTimeout(func, timeINMS);
  };
}

let debouncedHello = debounce(() => console.log("say hello", Date.now()), 800);

这里，该debounce函数接受两个参数，一个记录的函数say hello和一个表示该函数应延迟的时间（以毫秒为单位）的数字，然后返回一个具有去抖动功能的函数。

去抖动是一种非常简单且直观的技术，而且可以显著提高性能。

希望您能够理解这个概念。在我的下一篇文章中，我将讨论另一种类似于去抖动的技术：节流。

敬请关注并注意安全❤✌️