欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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         }

 

上一篇:

下一篇: