vue倒计时BUG

Question

 <span class="text" :style="{ backgroundColor: bgColor, color: color }">{{hour}}</span><span :style="{ color: bgColor }">:</span>
 <span class="text" :style="{ backgroundColor: bgColor, color: color }">{{minute}}</span><span :style="{ color: bgColor }">:</span>
 <span class="text" :style="{ backgroundColor: bgColor, color: color }">{{second}}</span>
 

   export default {
    name: 'ranking',
    props: {
      date: {
        default: new Date()
      },
      bgColor: {
        default: '#000111'
      },
      color: {
        default: '#FFFFFF'
      }
    },
    data() {
      return {
            hour: '00',
            minute: '01',
            second: '03',
            count: this.date - new Date().getTime(),
            interval: null
          }
       },
       methods: {
       start () {
        this.interval = setInterval(()=> {
          console.log(this.date)
          this.count = this.count - 1000
          if (this.count <= 0) {
            this.second = '00'
            clearInterval(this.interval)
            this.timeDown()
            return
          }
          this.hour = parseInt(this.count / (60 * 60 * 1000)) + ''
          if (this.hour < 10) {
            this.hour = '0' + this.hour
          }
          let n = this.count % (60 * 60 * 1000)
          this.minute = parseInt(n / (60 * 1000)) + ''
          if (this.minute < 10) {
            this.minute = '0' + this.minute
          }
          let n2 = n % (60 * 1000)
          this.second = parseInt(n2 / 1000) + ''
          if (this.second < 10) {
            this.second = '0' + this.second
          }
        }, 1000)
      },
      timeDown () {
        this.$emit('timeDown')
      }
      
    },
   mounted(){
        this.start()
    },
     computed: {}  
     

1、计划是按照每秒循环一次，结果一秒循环2次
2、秒钟在一秒后瞬间归零，分钟不动

请教高手是否哪一步算法写错了

Answer 1

把

this.count = this.count - 1000

换成

this.count = (parseInt(this.hour) * 60 * 60 + parseInt(this.minute) * 60 + parseInt(this.second))*1000 - 1000

Answer 2

感觉是this的指向问题，定时器里的this指向window，不指向vue实例。

   export default {
    name: 'ranking',
    props: {
      date: {
        default: new Date()
      },
      bgColor: {
        default: '#000111'
      },
      color: {
        default: '#FFFFFF'
      }
    },
    data() {
      return {
            hour: '00',
            minute: '01',
            second: '03',
            count: this.date - new Date().getTime(),
            interval: null
          }
       },
       methods: {
       start () {
       var _this = this;
        this.interval = setInterval(()=> {
          console.log(_this .date)
          _this .count = _this .count - 1000
          if (_this .count <= 0) {
            _this .second = '00'
            clearInterval(_this .interval)
            this.timeDown()
            return
          }
          _this .hour = parseInt(_this .count / (60 * 60 * 1000)) + ''
          if (this.hour < 10) {
            _this .hour = '0' + _this .hour
          }
          let n = _this .count % (60 * 60 * 1000)
          _this .minute = parseInt(n / (60 * 1000)) + ''
          if (_this .minute < 10) {
            _this .minute = '0' + _this .minute
          }
          let n2 = n % (60 * 1000)
          _this .second = parseInt(n2 / 1000) + ''
          if (_this .second < 10) {
            _this .second = '0' + _this .second
          }
        }, 1000)
      },
      timeDown () {
        this.$emit('timeDown')
      }
      
    },
   mounted(){
        this.start()
    },
     computed: {}  
     

Answer 3

看 this指向，清空定时器，还有倒计时的时候 是不是输出错了