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

2017-09-26 19:48:15来源:CSDN作者:weixin_38788347人点击

分享

本文的操作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>

这样,当你连续输入的时候,不会在控制台上打印出来,延伸到ajax也就是不会不断发送请求,当你输入完毕500ms之后才打印出来(发送请求),以用户500ms的延迟时间来减缓服务器压力,对用户的影响微乎其微。

注意:timer必须在事件监听之前定义,在内部定义每个事件都有一个timer,其作用域也为相应的事件,因此请求也会不断发生!

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台