JavaScript 中的防抖动。

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

防抖是一种模式，它允许将某些代码的执行延迟到指定的时间，以避免不必要的 CPU 周期、API 调用并提高性能。

为什么要进行防抖动？

一个词：“表现”。

假设你正在开发一个电子商务应用程序。你需要在其中实现一个用于搜索产品的搜索栏。当用户输入一个字符时，就会发起一个 API 调用。

请看下面的例子。

在上面的例子中，我们有一个简单的搜索栏和一个 API 调用次数统计。当我们在搜索栏中输入内容时，API 调用次数会随着每个字符的输入而增加。但这并非我们想要的结果。我们希望等待用户停止输入。一旦用户停止输入，我们就立即发起 API 调用。

那么，我们该如何解决这个问题呢？——这就需要用到防抖技术了。

最终版本，已添加防抖功能。

挺酷的吧？

防抖功能

请查看我们上面实现的防抖函数。

function debounce(fn, delay) {
  let timer;

  return function () {
    clearTimeout(timer);
    timer = setTimeout(() => fn(), delay);
  };
}

我们在这里所做的，是初始化一个计时器，然后返回一个值function。一旦用户开始输入，function计时器就会执行。

1. 首先，如果计时器已初始化，则清除计时器。

2. 然后它分配定时器 setTimeout 函数，如果 1 秒后未清除，该函数将运行。

3. 如果用户在 1 秒内输入任何字符，function则会再次调用该函数。但在上一步中，我们已经将 setTimeout 函数赋值给了计时器变量。因此，clearTimeout 函数会清除计时器变量中的 setTimeout 函数，并为其赋值一个新的 setTimeout 函数。

4. 如果用户没有输入任何内容，并且 1 秒钟过去了，setTimeout 中的函数将执行并发出 API 调用。

就是这样。

this带有参数绑定的防抖函数的完整版本是：

function debounce(fn, delay) {
  let timer;

  return function () {
    const context = this;
    const args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(context, args), delay);
  };
}

好了，我这边就到这里。下次见😁