解决实时搜索发送ajax请求过多的问题

最新推荐文章于 2021-08-06 01:33:30 发布

小皮咖

最新推荐文章于 2021-08-06 01:33:30 发布

阅读量3.4k

点赞数 1

分类专栏：前端小功能文章标签： ajax js javascript 实时搜索

本文链接：https://blog.csdn.net/weixin_38788347/article/details/78095720

版权

前端小功能专栏收录该内容

14 篇文章 0 订阅

订阅专栏

本文的操作dom基于JQ。

提出问题

实时搜索框的目的是：当用户输入内容时，及时发送给后端ajax请求。
但存在的一个问题是——如果用户输入后发现输错了删除重新输入，那么这段时间内就会出现多余的Ajax请求，过多的后台请求无疑造成了服务器的压力。

如何解决？

思考？当用户在输入的时候，发现误操作和解决误操作的时间一般是500ms以内（这是我个人觉得），我们能不能设置一个时间间隔500ms，如果在这段时间内没有发生用户输入的行为，那么就向后台发送Ajax请求！

解决问题！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style></style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
 <input type="text" id="input"> 
  <script>
    $('#input').on('keyup',function(e) {
      let t = $('#input').val()
      console.log(t)
    })
  </script>

</body>
</html>

当代码是这样子的时候，输入一个字符便会在控制台上打印一个字符，删除也是如此效果。
对代码进行优化，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style></style>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
 <input type="text" id="input"> 
  <script>
    let timer
    $('#input').on('keyup',function(e) {
      if(timer) clearTimeout(timer)
      timer = setTimeout(() => {
        let t = $('#input').val()
        console.log(t)
      }, 500)
    })
  </script>

</body>
</html>