自动完成必须用防抖，因其可避免高频输入触发冗余请求，防止响应错乱并提升性能；通过闭包保存定时器、清除前次计时、延迟执行最后一次输入，典型延迟200–400ms。
自动完成（Autocomplete）功能中，防抖（Debounce）是防止高频请求、提升性能和用户体验的关键技术。它的核心思想是：用户停止输入一段时间后，才触发搜索或请求，避免每按一次键就发一次请求。
为什么自动完成必须用防抖？
用户在输入框中快速打字时，可能每秒触发 5–10 次 input 事件。若每次都调用 API，不仅浪费资源、增加服务器压力，还可能导致响应错乱（比如后发的请求先返回，覆盖了正确结果）。防抖通过延迟执行，只保留最后一次有效输入的请求。
手写一个可靠的防抖函数
防抖函数接收目标函数和等待时间（毫秒），返回一个“被包装后”的新函数。关键点：每次触发时清除上一次定时器，重新计时。
示例代码：
立即学习“Java免费学习笔记（深入）”；
function debounce(fn, delay) {
let timer = null;
return function (...args) {
clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(this, args);
}, delay);
};
}
- 闭包保存 timer：确保每次调用都操作同一个定时器引用
- 使用 ...args 和 apply：兼容任意参数个数和 this 上下文
- 典型 delay 值：200–400ms（太短易误触发，太长有延迟感）
在输入框中集成防抖自动完成
结合 input 事件与防抖函数，再配合异步请求（如 fetch）和 DOM 更新即可实现完整流程：
const input = document.getElementById('search');
const results = document.getElementById('results');
const search = debounce(async (query) => {
if (!query.trim()) {
results.innerHTML = '';
return;
}
try {
const res = await fetch(`/api/suggest?q=${encodeURIComponent(query)}`);
const data = await res.json();
results.innerHTML = data.map(item =>
`<div class="suggestion">${item.text}</div>`
).join('');
} catch (err) {
results.innerHTML = '<div class="error">加载失败</div>';
}
}, 300);
input.addEventListener('input', (e) => {
search(e.target.value);
});
- 空值处理：输入为空时清空建议列表，避免残留
- 错误兜底：网络异常或接口报错时给出友好提示
- 防重复请求：防抖已保证同一输入周期内最多执行一次，无需额外节流或锁
进阶注意点
实际项目中还需考虑几个细节：
-
取消未完成的请求：使用
AbortController配合 fetch，避免旧请求返回后覆盖新结果 - 键盘导航支持：按上下键选择建议项时，应暂停防抖逻辑，否则输入中断后会清空选项
- 防抖与节流区别：自动完成场景用防抖；滚动加载更多适合节流（throttle）
基本上就这些。防抖本身不复杂，但容易忽略清理逻辑和边界情况，写对一次，整个搜索体验就稳了。
