vue实现多个倒计时同步刷新

使用场景：

一般多个定时器同时使用的场景主要应用在限时活动或者限时抢购商品等，如一个页面存在多个商品，且每个商品都有独立的限时抢购时间，因此就会遇到多个定时器同步刷新倒计时

限时抢购使用场景

这次就用简单数据来模拟多个定时器同步刷新实现效果,效果不同原理一样

模拟效果

html

<ul>
    <li v-for="(item,index) in timeLists" :key="index">
      <span>节日名称:{{item.name}} </span>
      <span>节日时间:{{item.time}} </span>
      <span>剩余时间:{{item.residueTime}} </span>
    </li> 
</ul>

js

var timeId
export default {
  name: '',
  data () {
    return {
      timeLists: []
    }
  },
  created () { // 实例被创建之后执行代码
    this.getTimeList()
  },
  beforeDestroy () {  //组件的销毁
    clearInterval(timeId) // 清除定时器
    timeId=null
  },
  methods: {
    //获取各节日时间
    getTimeList () {
      let timeArr = [{   //模拟数据   届时即为后端请求接口获取
        name: '元旦  ', time: '2020-01-01 00:00:00', residueTime: '' }, {
        name: '新年  ', time: '2020-01-25 00:00:00', residueTime: '' }, {
        name: '元宵节', time: '2020-02-08 00:00:00', residueTime: '' }]
      this.timeLists = timeArr
      this.setIntervalTime()    // 调取倒计时
    },
    // 设置定时器做倒计时
    setIntervalTime () {
      timeId = setInterval(() => {
        this.timeLists.forEach(item => {
          item.residueTime = this.getResidueTime(item.time)
        })
      }, 1000)
    },
    // 获取剩余时间
    getResidueTime (end) {
      let nowtime = new Date().getTime(); // 当前时间 毫秒数
      let endTime = Date.parse(new Date(end.replace(/-/g, "/"))); //结束时间  毫秒数
      let totalSeconds = (endTime - nowtime) / 1000; // 结束时间-当前时间 = 剩余多少时间
      let day = parseInt(totalSeconds / 3600 / 24); //天
      let hour = parseInt((totalSeconds / 3600) % 24); //时
      let minute = parseInt((totalSeconds / 60) % 60); //分
      let second = parseInt(totalSeconds % 60); //秒
      let residueTime ="倒计时：" + day + "天 " + hour + "时 " + minute + "分 " + second + "秒";
      hour = this.addZero(hour)
      minute = this.addZero(minute)
      second = this.addZero(second)
      if (totalSeconds < 0) {
        residueTime = '时间到'
      }
      return residueTime
    },
    // 补齐格式不满10加0
    addZero (n) {
      return n < 10 ? '0' + n : n
    },
  }
}