掌握debounce的正确用法，让你更好地利用underscore库！

debounce，顾名思义，就是延迟函数的执行。在 JavaScript 中，debounce 常用于优化异步编程中函数的调用，以防止函数被频繁地重复调用，从而提高程序的性能。

underscore 库是一个非常流行的 JavaScript 工具库，它提供了许多有用的函数，其中就包括 debounce 函数。underscore 库的 debounce 函数接受两个参数：

• 函数本身
• 延迟时间（以毫秒为单位）

debounce 函数会返回一个新的函数，该函数在被调用时，会延迟指定的时间后执行。如果在延迟时间内函数再次被调用，则会取消前一次的调用，并重新开始计时。

使用 debounce 函数可以优化以下场景中的函数调用：

• 搜索框中的输入事件：在搜索框中输入时，如果每次输入都会触发搜索操作，这可能会导致大量的 HTTP 请求，从而影响性能。我们可以使用 debounce 函数来延迟搜索操作的执行，直到用户停止输入一段时间后才触发搜索。
• 窗口大小变化事件：当窗口大小发生变化时，如果每次变化都会触发窗口大小改变事件的处理函数，这可能会导致大量的事件处理操作，从而影响性能。我们可以使用 debounce 函数来延迟窗口大小改变事件处理函数的执行，直到窗口大小停止变化一段时间后才触发。
• 滚动事件：当页面滚动时，如果每次滚动都会触发滚动事件的处理函数，这可能会导致大量的事件处理操作，从而影响性能。我们可以使用 debounce 函数来延迟滚动事件处理函数的执行，直到页面停止滚动一段时间后才触发。

debounce 函数的使用非常简单，只需要将要延迟执行的函数作为第一个参数，将延迟时间作为第二个参数传递给 debounce 函数即可。例如：

const searchInput = document.querySelector('#search-input');

const debouncedSearch = _.debounce(() => {
  // 执行搜索操作
}, 500);

searchInput.addEventListener('input', debouncedSearch);

在上面的代码中，我们将搜索框的输入事件处理函数包装在一个 debounce 函数中，并指定了延迟时间为 500 毫秒。这样，当用户在搜索框中输入时，如果在 500 毫秒内没有再次输入，则会执行搜索操作；如果在 500 毫秒内再次输入，则会取消前一次的搜索操作，并重新开始计时。

debounce 函数是一个非常有用的工具，可以帮助我们优化异步编程中的函数调用，以提高程序的性能。underscore 库的 debounce 函数非常简单易用，我们可以轻松地将其应用到我们的 JavaScript 代码中。