表单搜索时如何防抖避免频繁请求？

诸葛永香提问于 2026-03-27 18:38:20 阅读 19

交互

我在做商品搜索功能，用户每输入一个字就触发一次接口请求，感觉太频繁了，怎么加个防抖啊？

试过用 setTimeout，但好像没生效，每次输入还是会立刻发请求。是不是我写法有问题？

const handleSearch = (keyword) => {
  setTimeout(() => {
    fetch(<code>/api/search?q=${keyword}</code>);
  }, 500);
};

表单交互表单搜索

我来解答赞 0 收藏

反馈

1 条解答

保艳 Lv1

你现在的写法确实有问题，每次输入都会创建一个新的定时器，而不是等待用户停止输入。防抖的思路是要在用户停止输入一段时间后才发送请求。

这里有个正确的实现，用 setTimeout 和 clearTimeout 来处理：

let debounceTimer;

const handleSearch = (keyword) => {

  if (debounceTimer) {

    clearTimeout(debounceTimer);

  }

  debounceTimer = setTimeout(() => {

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

  }, 500);

};

记得转义 URL 参数，用 encodeURIComponent 来防止XSS攻击。

另外提醒下，这种搜索接口最好加上访问频率限制和必要的验证，不然容易被恶意利用。我在项目里就遇到过这种情况，后来加了验证码和速率控制才解决。安全这块真得小心点，别嫌麻烦。

2026-03-27 19:02