vue 用户输入搜索 与无限下拉

vue项目中,用户输入关键字搜索,并且手机端做无限下拉

watch: {
            'getListForm.searchKey'(val) { 
                        this.radioChange(); // 还有其他逻辑,内部调用getDeviceList
            }
        }

 

getDeviceList() {
                apiGetDeviceList(Qs.stringify(this.getListForm)).then(res => {
                    if (this.getListForm.pageNumber === 1) { // 搜索第一页 清空
                        this.deviceList = [];
                    }
                    this.deviceList.push(...res.list); // 数组合并
                    if (res.totalPage === 1 || res.totalPage < this.getListForm.pageNumber) {
                        this.loading = false;
                        this.finished = true;
                    }
                    this.loading = false;
                    this.getListForm.pageNumber++;
                })
            },

 

后来测试同学发现问题,当用户输入过快,网络缓慢的情况下,搜索结果不准确,由于上一次输入结果没有及时返回,导致多次插入数组

解决方案如下

watch: {
            'getListForm.searchKey'(val) { // 判断用户停止输入 val值是为此次监控的值,但是input 绑定的this.getListForm.searchKey 却是双向输入,那么每隔500毫秒检测一次,直到用户停止输入
                setTimeout(() => {
                    if (val === this.getListForm.searchKey) { 
                        this.radioChange();
                    }
                }, 500)
            }
        }