如何通过防抖优化JavaScript搜索功能

几个月前，我的经理分配给我一个任务：在整个页面实现搜索功能。棘手之处在于显示的文本以提示形式呈现，每个提示在超过两行后会被截断。如果文本超出限制，会出现一个分割按钮，允许用户在独立的分割视图区域中打开完整提示。

如果需求只是纯文本搜索，我本可以用简单的基于正则表达式的搜索来解决。事实上，在分割视图内部，我最初就使用了正则表达式方法进行搜索和匹配导航。这工作得很好。

由于我已经有一个可用的搜索辅助函数，我想：“为什么不将其重用于全局搜索呢？“我尝试了这个方法，但这次当我在搜索栏中点击下一个/上一个按钮时，UI开始出现延迟。甚至右上角的分页控件在导航时也变慢了。为了找到更好的方法，我转向AI工具进行头脑风暴，并发现了多个想法和概念。

作为开发人员，我们每天使用Google，自然对Google搜索的内部工作原理感到好奇。我打开Chrome开发者工具，开始在Google搜索栏中输入，并注意到一些有趣的现象。

虽然Google搜索会随着每次击键实时更新结果，但我们没有Google的服务器能力。在我们的应用程序中，防抖是避免不必要API调用和提高性能的实用方法。这个想法与ChatGPT之前给我的建议完全吻合。

因此，我在项目中应用了类似的方法，最终使用防抖技术以及React的useTransition和useDeferredValue钩子交付了这个功能。这就是本文想法的来源。

在本文中，我将向您展示如何通过实现防抖技术来优化应用程序的性能。

未使用防抖时的问题

假设您正在构建一个从API获取结果的搜索栏。每次用户输入一个字母时，搜索栏都会立即发出新的请求。

如果有人输入单词"JavaScript”，这意味着将触发10个独立的API调用——每个字符一个。

在Google搜索中，结果会随着每次击键实时更新。但与Google不同，我们没有庞大的基础设施来处理这种负载。在大多数应用程序中，为每个字符触发请求很快就会变得低效。

起初，这可能看起来不是什么大问题，但在实践中会导致严重问题。浏览器必须管理大量不必要的请求，服务器因重复调用而过载，用户最终会获得延迟或不一致的体验。整个界面感觉沉重且无响应。

这正是我在将简单的基于正则表达式的搜索函数重用于全局搜索时遇到的情况。它在分割视图内的小提示中工作良好，但在具有导航按钮和分页的大规模应用时，UI开始冻结和变慢。

什么是防抖？

防抖是一种技术，而不是编程语言特性。它只是控制函数调用频率的一种方式。不是每次事件发生时都运行函数，而是延迟其执行。

如果事件在延迟期间持续触发，计时器会重置。函数只在用户最终暂停时运行。

考虑在搜索栏中输入内容。没有防抖，应用程序会为每次击键发出请求。使用防抖，应用程序会等待用户短暂停止输入——比如300毫秒——然后只用最终输入发出一个请求。

在幕后，这通常使用setTimeout和clearTimeout实现。当事件发生时启动计时器，如果在计时器结束前发生另一个事件，则清除并重新启动计时器。只有当用户在指定的延迟时间内停止输入时，函数才会执行。

如何在JavaScript中实现防抖

如前所述，防抖不绑定任何特定编程语言。它只是一个可以使用计时器实现的概念。在JavaScript中，我们通常使用setTimeout和clearTimeout来实现这一点。

以下是JavaScript中防抖函数的简单示例：

1
2
3
4
5
6
7
8
9


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

我们从一个接受两个参数的debounce函数开始：

fn是我们想要控制的函数，比如API调用
delay是我们实际运行fn之前要等待的时间

在内部，我们声明一个变量timer。这将保存对setTimeout的引用。

debounce函数然后返回另一个函数。这个返回的函数是实际在事件（如输入或API调用）发生时运行的函数。

每次用户输入时，您要做的第一件事是clearTimeout(timer)。这会取消任何先前调度的函数调用。然后您使用setTimeout创建一个新的超时。

如果用户在延迟结束之前继续输入，旧的计时器会被清除并重新启动。只有当用户暂停足够长时间时，超时才会完成，fn才会执行。

您是否注意到我使用了fn.apply(this, args)？这只是调用原始函数的一种安全方式，具有正确的this上下文并传递所有参数。

以下是在实践中如何使用它：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


function fetchResults(query) {
  console.log("Fetching results for:", query);
  // 这里您可以调用API
}

// 用防抖包装它
const debouncedSearch = debounce(fetchResults, 300);

// 附加到输入事件
const input = document.getElementById("search");
input.addEventListener("input", (e) => {
  debouncedSearch(e.target.value);
});

fetchResults是我们的实际搜索函数。通常，它会为每次击键运行
我们用防抖包装它并设置300ms的延迟。这意味着它不会运行，直到用户停止输入300ms
在每个输入事件上，我们不直接调用fetchResults，而是调用debouncedSearch。这确保只有函数的防抖版本执行

因此，如果用户输入"hello”，而不是五个API调用，只有在他们暂停时才会触发一两个调用。

在搜索中使用防抖的好处

在搜索功能中使用防抖可能感觉像是一个小优化，但它有很大的影响。最明显的好处是性能。

您的应用程序不是为每次击键发出请求，而是等待用户暂停，这节省了浏览器和服务器资源。UI感觉更加流畅，因为它不会不断被不必要的调用中断。

防抖还提高了可扩展性。如果数百或数千用户同时输入，您将减少大量浪费的API调用。这意味着您的后端可以处理更多用户而不会过载。

对SEO和分析也有间接好处。当您的应用程序高效运行且感觉敏捷时，用户停留时间更长，互动更多，跳出率更低。这种响应能力可以大大影响人们对您产品质量的看法。

需要避免的常见错误

虽然防抖功能强大，但开发人员经常犯一些错误。一个常见问题是设置延迟过高。如果让用户等待一两秒才能看到结果，搜索会感觉无响应。

另一方面，太短的延迟可能无法充分减少调用以发挥作用。通常300-500毫秒是一个甜蜜点，但这取决于您的用例。

另一个错误是忘记清除旧计时器。如果不清除，您的应用程序可能仍会执行较旧的过时调用，这可能导致故障或内存泄漏。这就是为什么clearTimeout在任何防抖函数中与setTimeout同样重要。

考虑边缘情况也很重要。如果输入被快速清除会发生什么？或者如果有人粘贴长字符串而不是输入？测试这些情况可确保您的防抖函数在真实场景中平稳工作。

结论

当我第一次遇到构建全局搜索的挑战时，我以为可以简单地重用我的基本基于正则表达式的解决方案。然而，UI很快开始延迟，用户体验下降。令人惊讶的是，这样一个小的概念能显著影响性能。

防抖确保您的函数在正确的时间运行，而不是每次都运行。无论您是构建简单的JavaScript应用程序还是使用React和Next.js，这种技术都有助于减少不必要的调用，提高性能，并保持应用程序的可扩展性。

所以下次构建搜索栏时，请记住：不仅要让它工作，还要让它高效。

结束语

希望您觉得这篇文章有见地。我是Ajay Yadav，一名软件开发人员和内容创作者。

您可以通过以下方式联系我：

Twitter/X和LinkedIn，我在那里分享见解帮助您每天提高0.01%
查看我的GitHub了解更多项目
我还运营一个印地语YouTube频道，分享有关职业、软件工程和技术写作的内容

下篇文章再见——在此之前，继续学习！

JavaScript防抖技术优化搜索性能实战指南

本文详细介绍了如何使用JavaScript防抖技术优化搜索功能性能。通过实际项目案例展示未使用防抖时的界面卡顿问题，深入解析防抖原理及实现方式，并提供可复用的代码示例和最佳实践建议。