js缓动算法以及应用场景(vue)
2021-01-18 20:12
标签：stl rda interval 定时器 lse eva nbsp view string store->mapContainer.js state: selectBox.vue 主要为，勾选之后，静态restful接口的数据进行定时器加减10 home.vue(websocket组件) js缓动算法以及应用场景(vue) 标签：stl rda interval 定时器 lse eva nbsp view string 原文地址：https://www.cnblogs.com/lsc-boke/p/12912064.html largePassengerFlow: null,//大客流的定时器
largePassengerData: [],//大客流的定时器(动态+-10假数据)
largePassengerSlowData: [],//大客流缓动5*5s后的数据
largePassengerSlowDataFlow: [],//大客流缓动5*5s后的数据定时器
twoState: false,//缓动5次之内为false,第五次为true
set_largePassengerFlow(_state, obj) {
_state.largePassengerFlow = obj;
},
set_largePassengerData(_state, obj) {
_state.largePassengerData = obj;
},
set_largePassengerSlowData(_state, obj) {
_state.largePassengerSlowData = obj;
},
set_largePassengerSlowDataFlow(_state, obj) {
_state.largePassengerSlowDataFlow = obj;
},
set_twoState(_state, obj) {
_state.twoState = obj;
},
// 大客流
getLatestList() {
this.$api.getLatestList({}).then(dl => {
let sk = JSON.parse(JSON.stringify(dl));
this.bus.$emit(‘passengerSocket‘, sk);
let largeTime = setInterval(() => {
sk.forEach(res => {
res.average += parseInt(Math.random() * 10 + 1) + parseInt(-Math.random() * 10 + 1);
});
this.set_largePassengerData(sk);
this.bus.$emit(‘passengerSocket‘, sk);
}, 5000);
this.set_largePassengerFlow(largeTime);
});
},
mounted() {
socket.on(‘hz_passenger‘, data => {
this.newReVal = JSON.parse(data);
let sk = JSON.parse(JSON.stringify(this.newReVal));
clearInterval(this.largePassengerSlowDataFlow);
clearInterval(this.largePassengerFlow);
this.changeTime(this.largePassengerData,this.newReVal,this.largePassengerFlow)
});
},
/****
sk1为old数组，
sk2为New数组,
sTime为定时器
***/
changeTime(sk1=[],sk2=[],sTime = null){
let sk4 = JSON.parse(JSON.stringify(sk1));
let sk4List=[],sk5List = [],sk3=null,timeNum = 0;
for (let i = 0; i ) {
if(sk1[i].average - sk2[i].average>0){
sk3 = -Math.round(Math.abs(sk1[i].average - sk2[i].average) / 5);
}else{
sk3 = Math.round(Math.abs(sk1[i].average - sk2[i].average) / 5);
}
sk4List.push({ id: i + 1, average: sk3 });
}
console.log(‘sk4List‘,sk4List)
sTime = setInterval(() => {
sk5List = [];
timeNum += 1;
for (let j = 0; j ) {
let sk5 = (sk1[j].average += sk4List[j].average);
sk4[j].average = sk5;
sk5List.push({ id: j + 1, num: sk5 });
}
//前4次为平均缓动，最后一次为真实数据
if(timeNum){
this.bus.$emit(‘passengerSocket‘, sk4);
this.set_largePassengerSlowData(sk4);
this.set_twoState(false)
}else if (timeNum == 5) {
this.bus.$emit(‘passengerSocket‘, sk2);
this.set_largePassengerSlowData(sk2);
clearInterval(sTime);
this.set_twoState(true)
}else{
this.set_twoState(false)
}
}, 3000);
}
watch:{
/*****
整个效果实现逻辑
1.selectBox页面静态接口获取后，实现定时器随机数加减,
2.socket数据推过来后,实现5(次)*5s，25s后数据波动到正确值(延缓25s)，
3.然后通过监听twoState状态位的更新，在watch里面去实现上一步25s后数据的随机数加减,
4.关闭页面的时候，去注销定时器
*/
twoState(val,oldval){
if(val === true){
let sk =this.largePassengerSlowData;
let largeTime = setInterval(() => {
sk.forEach(res => {
res.average += parseInt(Math.random() * 10 + 1) + parseInt(-Math.random() * 10 + 1);
});
this.set_largePassengerData(sk);
this.bus.$emit(‘passengerSocket‘, sk);
}, 5000);
this.set_largePassengerSlowDataFlow(largeTime)
}
}
}
上一篇：委托（C# 编程指南）
下一篇：机器学习算法及代码实现–神经网络