vue 用户输入搜索 与无限下拉
程序员文章站
2023-12-29 08:45:10
vue项目中,用户输入关键字搜索,并且手机端做无限下拉 后来测试同学发现问题,当用户输入过快,网络缓慢的情况下,搜索结果不准确,由于上一次输入结果没有及时返回,导致多次插入数组 解决方案如下 ......
vue项目中,用户输入关键字搜索,并且手机端做无限下拉
watch: { 'getlistform.searchkey'(val) { this.radiochange(); // 还有其他逻辑,内部调用getdevicelist } }
1 getdevicelist() { 2 apigetdevicelist(qs.stringify(this.getlistform)).then(res => { 3 if (this.getlistform.pagenumber === 1) { // 搜索第一页 清空 4 this.devicelist = []; 5 } 6 this.devicelist.push(...res.list); // 数组合并 7 if (res.totalpage === 1 || res.totalpage < this.getlistform.pagenumber) { 8 this.loading = false; 9 this.finished = true; 10 } 11 this.loading = false; 12 this.getlistform.pagenumber++; 13 }) 14 },
后来测试同学发现问题,当用户输入过快,网络缓慢的情况下,搜索结果不准确,由于上一次输入结果没有及时返回,导致多次插入数组
解决方案如下
1 watch: { 2 'getlistform.searchkey'(val) { // 判断用户停止输入 val值是为此次监控的值,但是input 绑定的this.getlistform.searchkey 却是双向输入,那么每隔500毫秒检测一次,直到用户停止输入 3 settimeout(() => { 4 if (val === this.getlistform.searchkey) { 5 this.radiochange(); 6 } 7 }, 500) 8 } 9 }