中文输入法下防抖应区分组合状态：监听compositionstart暂停防抖，compositionend后立即触发并恢复，仅在!isComposing时响应input事件，避免拼音阶段误请求。
防抖与中文输入法的冲突本质
在搜索建议下拉框中，直接对 input 事件加防抖（debounce），会导致中文输入法下“拼音未上屏前就触发请求”，比如输入“shanghai”，还没选字就发了 8 次请求（每个字母一次）。这是因为 Chrome/Firefox 在中文输入过程中会连续触发 input，但此时 event.data 是拼音片段（如 "sh"、"sha"），并非用户最终意图。更关键的是，输入法处于组合状态（composition）时，compositionstart 和 compositionend 事件才是语义边界——只有 compositionend 后的 input 才代表真实确认的文本。
优雅处理的三步逻辑
不阻塞输入体验，也不漏掉有效输入，核心是：**区分组合状态，只在确认后防抖**。
-
监听
compositionstart：设一个标志isComposing = true，暂停防抖逻辑（或忽略后续 input） -
监听
compositionend：设isComposing = false，立即触发一次防抖检查（因为此时 input 已同步更新为上屏内容） -
input 事件中加守卫：仅当
!isComposing时才执行防抖函数；否则跳过（避免拼音阶段干扰）
代码实现（轻量无依赖）
以下是一个可直接复用的封装：
function useAutocomplete(inputEl, fetchSuggestions, delay = 300) {
let isComposing = false;
let timeoutId = null;
const triggerSearch = () => {
const query = inputEl.value.trim();
if (query.length > 0) fetchSuggestions(query);
};
const debouncedSearch = () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(triggerSearch, delay);
};
const handleInput = () => {
if (!isComposing) debouncedSearch();
};
const handleCompositionStart = () => {
isComposing = true;
};
const handleCompositionEnd = () => {
isComposing = false;
// 立即检查：compositionend 后 input 值已更新，应立刻响应
debouncedSearch();
};
inputEl.addEventListener('input', handleInput);
inputEl.addEventListener('compositionstart', handleCompositionStart);
inputEl.addEventListener('compositionend', handleCompositionEnd);
// 清理函数（可选）
return () => {
inputEl.removeEventListener('input', handleInput);
inputEl.removeEventListener('compositionstart', handleCompositionStart);
inputEl.removeEventListener('compositionend', handleCompositionEnd);
clearTimeout(timeoutId);
};
}
// 使用示例
const input = document.getElementById('search-input');
useAutocomplete(input, (query) => {
console.log('请求建议:', query);
// 调用 API 获取 suggestions...
});
补充细节与注意事项
-
不要用
keydown/keyup替代：它们无法捕获粘贴、语音输入、IME 直接上屏等场景，input+ composition 是唯一可靠组合 -
移动端兼容性良好：iOS Safari、Android Chrome 均支持
compositionstart/end（iOS 10.3+，Android 4.4+） -
空格键、回车等上屏操作也会触发
compositionend，无需额外处理 - 如果使用 React/Vue，注意事件监听绑定时机和 cleanup，避免重复绑定或内存泄漏
