js缓动算法以及应用场景(vue)

Posted 2021-02-18 影ing

store->mapContainer.js

state:

  largePassengerFlow: null,//大客流的定时器
  largePassengerData: [],//大客流的定时器(动态+-10假数据)
  largePassengerSlowData: [],//大客流缓动5*5s后的数据
  largePassengerSlowDataFlow: [],//大客流缓动5*5s后的数据定时器
  twoState: false,//缓动5次之内为false,第五次为true

mutations:

  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;
  },

selectBox.vue

主要为，勾选之后，静态restful接口的数据进行定时器加减10

    // 大客流
    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);
      });
    },

home.vue(websocket组件)

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 < sk1.length; 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 < sk1.length; j++) {
          let sk5 = (sk1[j].average += sk4List[j].average);
          sk4[j].average = sk5;
          sk5List.push({ id: j + 1, num: sk5 });
        }
        //前4次为平均缓动，最后一次为真实数据
         if(timeNum<5){
            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);
    }

View Code

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)
       }
    }
}