输入框自动补全怎么防抖才不卡顿？

程序猿含含提问于 2026-03-12 13:58:19 阅读 48

交互

我用原生 JS 做了个搜索框的自动补全，每次 input 事件都发请求，结果疯狂请求接口，页面卡得不行。试过加 setTimeout，但好像没生效，还是频繁触发。

这是我现在写的监听代码：

input.addEventListener('input', () => {
  fetch(<code>/search?q=${input.value}</code>)
    .then(res => res.json())
    .then(data => renderSuggestions(data));
});

该怎么正确加防抖？是不是得把定时器变量提到外面？求个靠谱写法！

我来解答赞 8 收藏

反馈

1 条解答

技术一诺 Lv1

对，定时器变量得提到外面，不然每次触发都会新建一个定时器，互相不干扰，根本没起到防抖效果。

你的问题在于每次input都新建了一个setTimeout，这些定时器各跑各的，根本不会取消上一次。

正确写法是这样的：

let timer = null;



input.addEventListener('input', () => {

  // 先清除上一次的定时器

  if (timer) clearTimeout(timer);

  

  // 设置新的定时器，300ms后才发请求

  timer = setTimeout(() => {

    fetch(/search?q=${input.value})

      .then(res => res.json())

      .then(data => renderSuggestions(data));

  }, 300);

});

原理很简单：每次触发时先把之前的timer清掉，只有最后一次输入停下来300ms才会真正发请求。

还有个坑提醒你：请求发出去之后，用户可能已经清空输入框了，这时候返回的结果不应该展示。最好在fetch之前判断一下input.value是否为空，另外可以在发新请求前把上一次请求取消掉，不过这个需要用AbortController，稍微复杂点，先把基础防抖搞定吧。

2026-03-12 14:07