vue 使用async寫 數字動態加載效果

父組件 

<interval-number :number-content="blockHeight" v-if="blockHeight>0"></interval-number>

import IntervalNumber from './IntervalNumber.vue'
components:{
    IntervalNumber,
}

子組件

<template>
  <span class="IntervalNumber">
		{{ counter }}
  </span>
</template>


<script>

export default {
  name: 'IntervalNumber',
  props: {
    numberContent: Number
  },
  data () {
    return {
      counter: this.numberContent,
      timeTicket: null,
    }
  },
  mounted(){
    let time = 1000 //ms  數字滾動總時間
    let delayTime = 30 // ms 數字滾動間隔時間
    let divisions = time / delayTime

    this.asyncPrint(this.counter, divisions, delayTime)
    
  },
  methods:{
    timeOut(ms) {
      return new Promise((resolve) => {
        this.timeTicket = setTimeout(resolve, ms)
      })
    },
    async asyncPrint(value, divisions, ms){
      for(let i=0; i< divisions; i++){
        
        try {
          await this.timeOut(ms);
        } catch (err) {
          console.log(err)
        }
	
       this.counter = Math.round(value / divisions * i);
      }
      
      this.counter = this.numberContent

      clearTimeout(this.timeTicket)
      this.timeTicket = null
    }
  }
}
</script>