1、vue中实时监听input值的变化,停止输入300ms后去请求,而不是时时请求数据
2、解决异步请求可能会发生先请求后返回问题,导致结果列表不是预料展示的效果
一、问题
做搜索功能时,监听input的value值变化实时请求数据,每增加一个字符,就发送一次请求。例如输入12345,会监听到5次变化1 12 123 1234 12345,导致连续请求5次。这是没必要的,增加服务器负担,可能出现卡顿的情况。
甚至,一定概率下会发生请求返回顺序问题,当输入速度很快时,连续发请求,服务器可能先返回12345请求的结果,然后再返回12请求的结果,导致最后页面上显示的结果是12请求到的结果列表,而不是想要搜索的12345的结果。一定程度上降低这种情况。
二、想法
不希望input框中值一改变,就马上去请求数据,而是在指定间隔内没有输入时,才会执行函数。如果停止输入但是在指定间隔内又输入,会重新触发计时。这就是函数防抖。
实时监听input值的变化,输入一个字符,300ms后再去获取input中的输入值。
三、关键代码
data() {
return {
inputVal: '',
timeout: null,
}
}
watch: {
inputVal(curVal, oldVal) {
// 实现input连续输入,只发一次请求
clearTimeout(this.timeou