小程序上拉加载数据导致渲染数据的数组数据累加，页面卡顿

Question

我小程序使用uniapp写的其中一个页面有多条数据，第一次进入只会渲染十条，上拉加载一次会调用一次接口请求十条数据，所以导致每次上拉都会pushu进十条数据，导致我这个接收数据的数组数据过多导致页面卡顿请问如何优化这个方法。

/*上拉加载的回调: mescroll携带page的参数, 其中num:当前页 从1开始, size:每页数据条数,默认10 */
            upCallback(mescroll) {
                //联网加载数据
                this.getList(
                    mescroll.num,
                    mescroll.size,
                    this.searchField,
                    this.regionCode,
                    this.industryId,
                    this.groupId,
                    this.stateId,
                    this.OrderBy,
                    res => {
                        if (res.success) {
                            //设置列表数据
                            if (mescroll.num == 1) {
                                this.detail = []; //如果是第一页需手动置空列表
                            }
                            
                            this.detail = this.detail.concat(res.data.list);
                            console.log("上拉加载", this.detail);
                            let list = res.data.list;
                            // 组态按钮判断
                            this.showGraphicBtn();
                            // 获取当前用户是否拥有权限操作项目
                            // this.getUsetProject();
                            //获取总设备和今日报警总数
                            for (let i = 0; i < list.length; i++) {
                                var num = list[i].id;
                                // this.getDeviceNum(num);
                                this.getDeviceScnt(num);
                                num = null;
                            }
                            mescroll.endBySize(list.length, res.data.total);
                        } else {
                            uni.showToast({
                                icon: 'none',
                                title: res.error
                            });
                        }
                    },
                    () => {
                        //联网失败的回调,隐藏下拉刷新的状态
                        mescroll.endErr();
                    }
                );
            },

this.detail这个是我渲染页面数据的数组

Answer 1

可以写个布尔值变量去监听上次上拉加载数据是否完成，完成之后才执行之后的上拉加载，类似于防抖