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

最新推荐文章于 2025-04-11 00:03:56 发布

uneedcode

最新推荐文章于 2025-04-11 00:03:56 发布

阅读量2.5k

点赞数

分类专栏： js 文章标签： js javascript

本文链接：https://blog.csdn.net/NoManCodes/article/details/106631033

版权

js 专栏收录该内容

8 篇文章

订阅专栏

什么是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);