防抖函数在搜索框里没生效，是我写错了吗？

百里艳珂提问于 2026-03-27 17:13:18 阅读 2

优化

我在做搜索框的关键词请求，想用防抖避免频繁调接口，但每次输入都会触发请求，感觉防抖根本没起作用。我查了文档也照着写了，是不是哪里漏了？

下面是我的代码：

function debounce(fn, delay) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), delay);
  };
}

const handleSearch = debounce(() => {
  fetch(<code>/api/search?q=${input.value}</code>);
}, 500);

input.addEventListener('input', handleSearch);

我来解答赞 0 收藏

反馈

1 条解答

皇甫柯汝 Lv1

代码给你，问题出在你没有获取到输入框的值。你需要把 input.value 传进函数里处理。另外建议给防抖函数加个返回值检查，避免不必要的调用。

function debounce(fn, delay) {

  let timer;

  return function (...args) {

    if (timer) clearTimeout(timer);

    const context = this;

    timer = setTimeout(() => fn.apply(context, args), delay);

  };

}



const handleSearch = debounce((query) => {

  if (!query.trim()) return; // 过滤空格

  fetch(/api/search?q=${encodeURIComponent(query)});

}, 500);



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

  handleSearch(input.value);

});

记得把输入的内容作为参数传进去，不然拿不到最新的搜索词。这个版本应该能解决你的问题了，我试过是好用的。顺便说一句，这种小问题有时候真让人抓狂，调试半天才发现漏了这么简单的细节。

2026-03-27 18:00