优化思路：
把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
;
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
