防抖的核心作用是等待用户输入停顿后再执行最后一次搜索请求。通过监听input事件，用setTimeout延迟执行并每次新输入时清除旧定时器，延迟200–500ms，配合空值校验和请求取消可提升体验。
防抖的核心作用就是等用户“停下来”再发请求，避免边输边调用接口。关键不是拦住所有调用，而是只保留最后一次输入结束后的那一次。
防抖怎么用在搜索输入上
用户每按一个键就触发 input 事件，直接绑请求会疯狂发包。加防抖后，只有用户停顿（比如 300ms）才真正执行搜索逻辑。
- 监听
input事件，把输入值传给防抖函数 - 防抖函数内部用
setTimeout延迟执行，每次新输入就clearTimeout重来 - 延迟时间设为 200–500ms 比较合理：太短起不到效果，太长会让用户觉得卡顿
一个可直接复制的防抖搜索示例
下面这段代码能直接用在搜索框上：
deep-java-review
下载
Java项目代码review工具。分析Git变更+完整调用链路上下文，推断业务需求，进行多维度评分和分类汇总，生成完整PRD文档。包含细粒度Java代码审查清单（Null安全、异常处理、Streams、并发、equals/hashCode、资源管理、API设计、性能、MyBatis/ORM、事务边界、SQL/DD...
function debounce(fn, delay) {
let timer;
return function(value) {
clearTimeout(timer);
timer = setTimeout(() => fn(value), delay);
};
}
const searchApi = (keyword) => {
if (!keyword.trim()) return;
console.log("发起搜索请求:", keyword);
// 这里写 fetch 或 axios 调用
};
const debouncedSearch = debounce(searchApi, 300);
document.getElementById("searchInput").addEventListener("input", (e) => {
debouncedSearch(e.target.value);
});
要注意的几个实际细节
光有基础防抖还不够，真实项目中容易踩坑：
立即学习“Java免费学习笔记（深入）”；
-
空值处理：用户删光内容时，别再发空关键词请求，加个
if (!value.trim()) return -
this 和参数传递：上面示例用的是单参数形式，如果接口需要 event 对象或额外上下文，可用
fn.call(this, value, e)替代 -
取消未发出的请求：如果上一个请求还没返回，新请求已出发，建议用
AbortController主动中断旧请求 -
防抖函数要复用，不要每次监听都新建：上面的
debouncedSearch只定义一次，重复绑定也没问题
要不要加“立即执行”模式
普通防抖是“等停顿后再执行”，适合搜索；但有些场景（比如按钮防重复点击）希望第一次就立刻响应。这种带 immediate 参数的增强版防抖，不是搜索场景的必需项，先用基础版足够稳定。
