防抖是指在事件频繁触发时只执行最后一次操作，常用于搜索功能中优化性能。通过设置延迟（如300ms），当用户停止输入后才发起请求，避免频繁调用。实现方式是封装一个debounce函数，利用setTimeout与clearTimeout控制执行时机。应用于input事件时，每次输入都会重置计时器，仅当间隔超过设定时间才触发搜索。需注意：合理设置延迟时间、过滤空值请求、可结合AbortController取消旧请求，并添加加载状态提升用户体验。该技术适用于实时搜索、自动补全等场景，能显著减少无效请求，提升性能。
在实现搜索功能时，用户每输入一个字符就立刻发起请求，会导致大量无效或重复的网络请求，影响性能并增加服务器压力。防抖（Debounce）是一种有效手段，能确保只在用户停止输入一段时间后再执行搜索操作，从而显著优化响应效率。
什么是防抖？
防抖的核心思想是：当事件被频繁触发时，只执行最后一次操作。对于搜索框来说，就是等用户停止输入一定时间后，再发起请求。
例如，设置 300 毫秒的防抖延迟，用户在连续打字过程中不会立即搜索，只有当两次按键间隔超过 300ms 时，才执行真正的搜索逻辑。
如何实现防抖搜索？
可以通过封装一个防抖函数来控制搜索请求的触发时机。以下是一个通用的防抖函数示例：
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
立即学习“Java免费学习笔记（深入）”；
function debounce(func, delay) { let timer = null; return function (...args) { clearTimeout(timer); timer = setTimeout(() => { func.apply(this, args); }, delay); }; }将该函数应用到搜索输入框的 input 事件中：
const searchInput = document.getElementById('search'); const handleSearch = debounce(function (query) { if (!query.trim()) return; console.log('发起搜索请求:', query); // 实际项目中调用 API // fetch(`/api/search?q=${encodeURIComponent(query)}`) }, 300); searchInput.addEventListener('input', (e) => { handleSearch(e.target.value); });关键细节与优化建议
- 延迟时间选择：300ms 是常见值，平衡了响应速度和性能；若搜索数据量大，可适当延长至 500ms。
- 空值处理：输入为空时应避免发起请求，减少无意义调用。
- 取消正在进行的请求：如果使用的是支持取消的请求方式（如 AbortController），可在新的搜索开始前中断旧请求，防止结果错乱。
- 用户体验提示：可配合加载状态或搜索图标动画，让用户知道搜索正在执行。
基本上就这些。合理使用防抖能让搜索更流畅、更高效，尤其适合实时搜索、自动补全等场景。不复杂但容易忽略细节，掌握后对前端性能优化很有帮助。
