JavaScript Debounce，最简单的解释！（附代码）

去抖动 (Debouncing) 是一种编程技术，它通过限制函数调用的频率来提升 Web 应用程序的性能。在本文中，我们将通过代码示例，了解什么是去抖动、它为何有用以及如何在 JavaScript 中实现它。

什么是去抖动？

去抖动是一种将函数执行延迟到上次调用后一定时间的方法。这在我们想要避免不必要或重复的函数调用（这些调用可能代价高昂或耗时）的场景下非常有用。

例如，假设我们有一个搜索框，会在用户输入时显示建议。如果我们调用一个函数在每次按键时获取建议，最终可能会向服务器发出过多的请求，从而降低应用程序的速度并浪费资源。相反，我们可以使用去抖动功能，等到用户停止输入一段时间后再发出请求。

如何在 JavaScript 中实现去抖动？

在 JavaScript 中实现去抖动的方法有很多种，但一种常见的方法是使用包装函数，该函数返回一个新函数，用于延迟原始函数的执行。包装函数还会跟踪一个计时器变量，该变量用于在调用新函数时清除或重置延迟。

const debounce = (mainFunction, delay) => {
  // Declare a variable called 'timer' to store the timer ID
  let timer;

  // Return an anonymous function that takes in any number of arguments
  return function (...args) {
    // Clear the previous timer to prevent the execution of 'mainFunction'
    clearTimeout(timer);

    // Set a new timer that will execute 'mainFunction' after the specified delay
    timer = setTimeout(() => {
      mainFunction(...args);
    }, delay);
  };
};

使用带有去抖动功能的包装函数

// Define a function called 'searchData' that logs a message to the console
function searchData() {
  console.log("searchData executed");
}

// Create a new debounced version of the 'searchData' function with a delay of 3000 milliseconds (3 seconds)
const debouncedSearchData = debounce(searchData, 3000);

// Call the debounced version of 'searchData'
debouncedSearchData();

现在，每当我们调用 时debouncedSearchData，它都不会searchData立即执行，而是等待 3 秒。如果debouncedSearchData在 3 秒内再次调用 ，它将重置计时器并再次等待 3 秒。只有当 3 秒内没有再次调用 时debouncedSearchData，它才会最终执行searchData。

图像表示

该图清楚地显示，每当再次调用该函数时，setTimeout() 都会被覆盖。

以下是现实生活中三个简单的去抖动示例：

1. 提交按钮：当您点击网站上的提交按钮时，它不会立即发送数据，而是等待几毫秒，看看您是否再次点击。这样可以防止意外的重复提交和错误。

2. 电梯：按下按钮呼叫电梯时，电梯不会立即启动，而是会等待几秒钟，看看是否有人想上下电梯。这样可以避免电梯频繁上下，节省能源和时间。

3. 搜索框：当您在搜索框中输入内容时，它不会在您每次按键时都显示建议，而是等到您停止输入一段时间后才会显示。这样可以避免向服务器发出过多的请求，从而提升性能和用户体验。

结论

去抖动是一种有效的技术，可以优化 Web 应用程序，减少可能影响性能或用户体验的不必要或重复的函数调用。我们可以在 JavaScript 中实现去抖动，方法是使用一个包装函数，该包装函数返回一个新函数，该新函数会将原始函数的执行延迟到上次调用后经过一定时间。

希望这篇博文对您有所帮助，并让您对 JavaScript 中的 Debouncing 有所了解。您可以点击此处查看我关于JavaScirpt 中的节流 (Throttling) 的文章。