加防抖可避免输入时频繁发请求导致结果乱序和资源浪费；基础实现用闭包保存定时器id，每次触发清旧设新；实际需设300–400ms延迟、过滤空值、清空旧结果，无需立即执行，但可选加cancel防止内存泄漏。
直接用防抖函数包裹搜索逻辑，设置合理延迟（如 300ms），就能让输入框只在用户停顿后发一次请求，避免连发、乱序、资源浪费。
为什么必须加防抖？
用户快速输入“react”时，会依次触发 “r”→“re”→“rea”→“reac”→“react” 五次 input 事件。不加防抖，就可能发出五个请求。由于网络响应时间不同，“reac” 的结果反而比 “react” 先回来，导致界面上显示的是过时建议——用户明明已输完，看到的却是少一个字母的结果。
基础防抖函数怎么写？
核心是闭包保存定时器 ID，每次触发都清旧设新：
function debounce(fn, delay) {
let timer;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => fn.apply(this, args), delay);
};
}
- 用 ...args 正确透传参数（比如 event 对象）
- 用 fn.apply(this, args) 保证 this 指向和原调用一致
- 不要用箭头函数定义内部回调，否则 this 会丢失
搜索场景的关键细节
光有基础版还不够，实际项目中要注意三点：
- 延迟别设太短：200ms 容易误触发，300–400ms 更符合用户停顿习惯
-
空值要过滤：在
fillSuggestions开头加if (!event.target.value.trim()) return;，避免搜空字符串 - 请求前清空旧结果：比如先清空 suggestions 列表，再发请求，防止旧 DOM 残留干扰
要不要加立即执行或取消功能？
对搜索框来说，不需要立即执行（immediate: true）。用户边输边看建议，本质是“等他打完”，不是“一输就查”。取消功能（cancel 方法）也非必需，但加了更健壮：
const debouncedSearch = debounce(fetchSuggestions, 300);
searchInput.addEventListener('input', debouncedSearch);
// 页面卸载前可选调用：
// debouncedSearch.cancel();
这能防止组件销毁后还试图更新已不存在的 DOM，避免报错。
