如何利用JS防抖实现搜索框优化

最新推荐文章于 2026-03-07 03:43:30 发布

原创最新推荐文章于 2026-03-07 03:43:30 发布 · 2.7k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被收录于：

8 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

什么是JS的防抖？
防抖指的是触发事件后在n秒内函数只执行一次，若在n秒内再次触发事件则重新计算，函数不会重复执行。
在实际项目中我们可能会碰到搜索框会浪费大量的请求。比如我们有一个input，每次用户在搜索框输入的时候就触发onInput事件然后发送请求。
以下代码是未优化前

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" id="input" />
  </body>
  <script>
    let input = document.getElementById("input");
    let num = 1;
    function sendRequest() {
      console.log(num++);
    }
    input.oninput=sendRequest;
  </script>
</html>

在这里插入图片描述
优化后

  let input = document.getElementById("input");
    let num = 1;
    function sendRequest() {
      console.log(num++);
    }
    // 我们想让用户输入完毕后过1s后再查询
    // 所以我们使用防抖,设置一个定时器，传入要执行的函数，延时的时间
    function debounce(fn, wait) {
      let timeout;
      return function () {
        if (timeout) clearTimeout(timeout);
        timeout = setTimeout(function () {
          fn.apply(this);
        }, wait);
      };
    }
    input.oninput = debounce(sendRequest, 2000);