迹忆客 专注技术分享

本文将教你如何利用 JavaScript debounce() 函数来提高应用程序的性能。

理解 JavaScript 中的术语 Debounce

JavaScript 使用去抖动技术来提高浏览器性能。去抖动是节流阀的相对物，它们都提高了在线应用程序的性能。

然而，它们在许多情况下被观察到。当我们只考虑最终状态时，就会使用去抖动。

例如，他们会延迟对预先输入的搜索结果的检索，直到用户完成输入。如果我们想控制所有中间状态的速度，最理想的工具是油门。

在 JavaScript 中使用 debounce() 函数

这是一个代码说明，可帮助你了解如何对函数进行去抖动：

function debounce(jss, timeout = 3000) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => {
      jss.apply(this, args);
    }, timeout);
  };
}

function userInput() {
  console.log('Changing data');
}

const workonChange = debounce(() => userInput());

运行代码

那么，这里发生了什么？debounce() 是一个独特的函数，它执行两个功能：

• 为计时器变量分配范围
• 设置你的函数在特定时间运行

让我们看一下第一个带有文本输入的用例，看看它是如何工作的。

当访问者写下第一个字母并释放键（定时器）时，debounce() 函数最初使用 clearTimeout 重置定时器。此时不需要该步骤，因为没有任何计划。

函数 userInput() 预计将在 3000 毫秒（3 秒）内被调用。但是，如果访问者继续键入，每个基本版本都会重新触发 debounce() 函数。

每次调用都必须重置计时器，或者换句话说，取消任何早期的 userInput() 准备并重新安排它到一个新的时间——未来 3000 毫秒。只要访问者在 3000 毫秒内保持击键，这种情况就会继续。

因为之前的计划不会被清除，userInput() 将被调用。

输出：

你会看到当你输入 s、h、i 或 v 时 setTimeout 方法会一直延迟（尽管调用了 userInput 函数）。当我们在打字时暂停三秒钟时，会打印出主要功能：Changing data。

去抖动通过仅在设定的暂停时间后调用函数而不是在每次操作时调用函数来提高应用程序速度。但是，你不必自己完成此操作。

例如，Lodash 中提供了一个 debounce 功能。贡献者改进了 Lodash 等库，以改进 debounce 功能。

在本文中，我们已经讨论了什么是去抖动、它为什么有用以及如何在 JavaScript 中实现它。