前端 JavaScript 简单实现防抖函数来提高应用性能

2023-09-03 01:25:06

好的，以下是关于前端 JavaScript 之『防抖』的简单代码实现的文章：

前端 JavaScript 之『防抖』的简单代码实现

在前端开发中，我们经常会遇到需要处理用户输入的情况，比如在搜索框中输入内容时，需要即时显示搜索结果，或者在表单中输入内容时，需要即时验证输入的有效性。在这些场景中，如果用户输入的速度非常快，可能会导致大量的请求发送到服务器，这可能会给服务器带来压力，并导致应用程序的性能下降。

为了解决这个问题，我们可以使用防抖（debounce）技术。防抖是一种用来抑制频繁触发的事件的发生的技术，它可以帮助减少对服务器的请求数量，并提高用户体验。

在 JavaScript 中，我们可以使用以下代码来实现一个简单的防抖函数：

function debounce(func, delay) {
  let timer;
  return function (...args) {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay);
  };
}

这个函数接受两个参数：func 是要防抖的函数，delay 是防抖的延迟时间，单位是毫秒。

当调用这个函数时，它会返回一个新的函数，这个新的函数会在被调用后延迟 delay 毫秒后执行 func 函数。如果在这个延迟时间内，这个新的函数又被调用，那么之前的调用会被取消，只有最后一个调用会被执行。

我们可以将这个防抖函数应用到我们之前提到的场景中，比如在搜索框中输入内容时，我们可以使用这个防抖函数来抑制搜索请求的发送，直到用户停止输入 delay 毫秒后才发送请求。

以下是一个使用防抖函数的例子：

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

const debouncedSearch = debounce((e) => {
  const query = e.target.value;
  fetchSearchResults(query);
}, 500);

searchInput.addEventListener('input', debouncedSearch);