转自:https://blog.csdn.net/XuM222222/article/details/81979811
在vue项目中实现实时搜索功能的思路一般是:
1、监听输入框的输入内容,通过emit将输入内容传递给实时搜索的父组件,同时触发父组件向服务器发送请求;
2、实时搜索的组件在接收到服务器返回的数据后将其传递给子组件进行展示;
下图是实时搜索功能的展示:
在输入框中输入人名,下方实时展示与输入相匹配的结果。
上面实现的实时搜索功能存在两个比较明显的问题:
1、每输入一个字符,就向后端发一次请求。如下图所示,当输入完一个人名的时候,就已经向后端发送了好多条请求,太多的请求会给服务器带来压力,其实在实时搜索过程中也并不需要发太多请求;
2、由于这些请求都是异步的,虽然发送请求时有先后顺序,但是返回的结果并不会按照发送请求那样有个先后顺序,而是哪个先匹配出结果哪个就先返回,后返回来的结果会将先返回来的结果覆盖,这样导致在最后输入完之后,发现下面展示的并不是最终的搜索结果。如下图所示,当输完“libai”时,下方展示的内容并不是“libai”对应的内容,而是“li”对应的内容。
针对上述两个问题进行优化:
1、减少请求次数
将发送请求的命令放入到定时器setTimeout中,然后通过定时器来限制向后端发送请求的次数。例如:规定在输入完一个字符后,如果300ms内没有继续输入,那么300ms后就发送一次请求;如果在300ms内继续输入了内容,那么就会删除上次定时器,重新开始计时,直到300ms内没有继续输入时再发送请求。这样就减少了一些不必要的请求。
具体实现代码:
监听输入框,当输入框中内容变化时触发inputChange事件,getData是用来触发实时搜索父元素向后端发送请求,通过设置定时器实现对请求次数的限制。
//模糊搜索
searchVague(val) {
if (this.timer) {
clearTimeout(this.timer);
}
if (val) {
this.timer = setTimeout(() => {
this.getData();
}, 300);
} else {
// 输入框中的内容被删为空时触发,此时会清除之前展示的搜索结果
this.getData();
}
}
2、取消上一次请求
从上面已知请求是异步的,发送请求时是按照先后顺序的,返回的结果的顺序则是难以预料的,导致出现最终想要的搜索结果被之前的请求返回结果覆盖。为了解决上述问题,我们需要让返回的结果也有个先后顺序,即先请求的先返回,如果在发送下一次请求时,上一次请求还没结束,那么就取消上一次的发送请求,这样,上面的问题就迎刃而解了。