济南品牌网站建设介绍,手机页面设计软件,贺州市城乡住房建设厅网站,上海网站建设宣传优化思路#xff1a; 把webSocket接收到的数据用一个数组存起来#xff0c;达到一定长度再统一渲染#xff0c;可根据推送数据的速度适当调解数组长度限制#xff0c;如果一段时间内改数组长度打不要渲染条件#xff0c;就用定时器之间渲染
data() {return {tempDataWsLi…优化思路 把webSocket接收到的数据用一个数组存起来达到一定长度再统一渲染可根据推送数据的速度适当调解数组长度限制如果一段时间内改数组长度打不要渲染条件就用定时器之间渲染
data() {return {tempDataWsList: [], // 存放临时ws数据数组list: [], // 页面上的列表listCopy: [], // 深拷贝的初始化列表数据用于统一渲染}
}
methods: {...// websocket接收数据的方法onMessage(data) {if (data.data) {// 将Json字符串转译const dataWs JSON.parse(data.data);// 将转译后的数据推入临时ws数据数组中this.tempDataWsList.push(dataWs);// 有ws数据就关闭定时器clearTimeout(this.wsTimeout);// 做缓存渲染,将ws接收到的数据放到数组满10个就统一渲染if (this.tempDataWsList.length 10) {this.handleList();} else {// 如果最后一个接收后1秒钟内不能满足10个则直接渲染this.wsTimeout setTimeout(() {this.handleList();}, 1000);}}},// 操作数据渲染handleList() {// 循环临时ws数据数组this.tempDataWsList.forEach(temp {// 循环深拷贝的初始化列表数据this.listCopy.forEach(item {// 循环判断列表对应ws数据id修改深拷贝列表上的值item.pointDetails.forEach(item1 {if (item1.id temp.detailsId) {item1.value temp.realVal;}});});});// 清空临时ws数据数组this.tempDataWsList [];// 将修改的列表数据赋值给页面渲染this.list this.listCopy;}
}
