搜索框防抖是在每次输入后清除旧定时器，只在输入停顿一段时间后搜索。把逻辑接在 input 事件上，清空输入时同时取消待执行的搜索。

准备本地搜索框

保存为 demo.html，脚本放在这段标记后。

<label>搜索 <input id="query"></label>
<output id="results" aria-live="polite"></output>

下面用本地数组验证触发次数。

每次输入都替换待执行的搜索

添加下面的脚本。

JavaScript 开发专家

掌握包含 ES6+、异步模式和 Node.js API 的现代 JavaScript。处理 Promise、事件循环和浏览器/Node 兼容性。在 JavaSc

下载

<script>
const input = document.querySelector("#query");
const output = document.querySelector("#results");
const words = ["apple", "apricot", "banana"];
let timer;

input.addEventListener("input", () => {
    clearTimeout(timer);
    const query = input.value.trim().toLowerCase();
    if (!query) {
        output.textContent = "";
        return;
    }
    timer = setTimeout(() => {
        console.count("search");
        output.textContent = words.filter(word => word.includes(query)).join(", ");
    }, 300);
});
</script>

如果改成网络请求，防抖控制发送时机。已发请求的乱序返回还要用取消信号或序号另外处理。

验证连续输入只搜索一次

在浏览器控制台执行。

for (const value of ["a", "ap", "app"]) {
    const input = document.querySelector("#query");
    input.value = value;
    input.dispatchEvent(new Event("input"));
}

等待后应显示 apple，控制台 search 只计数一次。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南