mlinquan/vue-awesome-countdown

Sometimes the countdown is deducted by 2 seconds

Dean-Christian-Armada opened this issue · 5 comments

Hello, I have used vue awesome countdown in Vue 2. My vue-awesome-countdown verson is 1.0.24..

Technically it works fine but from time to time there will be a time deduction delay of one second then it will just be deducted by 2 seconds. Below is my snippet

<template>
  <div>
    <vac ref="countdown" :left-time="msBeforeDraw" @finish="fresh">
          <p slot="process" slot-scope="{ timeObj }" class="mb-0">
            <small class="drawInfo">Countdown</small>
            <span v-if="timeObj.h !== '00'" class="colorMain"
              >{{ timeObj.h }}:</span
            >
            <span class="colorMain">{{ timeObj.m }}:</span>
            <span class="colorMain">{{ timeObj.s }}</span>
          </p>
          <span slot="finish" class="opening  drawInfo">
            <small>Countdown</small>
            <span class="colorMain">开奖中</span>
          </span>
        </vac>
  </div>
</template>

<script>
export default {
  data(){
    return {msBeforeDraw: 600}
  }
  methods: {
    async fresh() {
      await this.$parent.fetchKey()
      setTimeout(() => {
        if (this.$refs.countdown) {
          this.$refs.countdown.startCountdown(true)
        }
      }, 1000)
    }
  }
}
</script>

Hello, I have used vue awesome countdown in Vue 2. My vue-awesome-countdown verson is 1.0.24..

Technically it works fine but from time to time there will be a time deduction delay of one second then it will just be deducted by 2 seconds. Below is my snippet

<template>
  <div>
    <vac ref="countdown" :left-time="msBeforeDraw" @finish="fresh">
          <p slot="process" slot-scope="{ timeObj }" class="mb-0">
            <small class="drawInfo">Countdown</small>
            <span v-if="timeObj.h !== '00'" class="colorMain"
              >{{ timeObj.h }}:</span
            >
            <span class="colorMain">{{ timeObj.m }}:</span>
            <span class="colorMain">{{ timeObj.s }}</span>
          </p>
          <span slot="finish" class="opening  drawInfo">
            <small>Countdown</small>
            <span class="colorMain">开奖中</span>
          </span>
        </vac>
  </div>
</template>

<script>
export default {
  data(){
    return {msBeforeDraw: 600}
  }
  methods: {
    async fresh() {
      await this.$parent.fetchKey()
      setTimeout(() => {
        if (this.$refs.countdown) {
          this.$refs.countdown.startCountdown(true)
        }
      }, 1000)
    }
  }
}
</script>

The bug was fixed in version 1.0.28.
Please update the version and enjoy it.

It still happened even after upgrading to 1.0.28 but there are improvements.. For example within 60 seconds it only occurred 3 times

It still happened even after upgrading to 1.0.28 but there are improvements.. For example within 60 seconds it only occurred 3 times

Please update to the latest version 1.1.2 and try again

Looks like it really is fixed! Thanks!

I am using version 1.1.2 and am experiencing the same issue unfortunately.
Several times I see the countdown jumping by two seconds.

EDIT: Apparently if I use {{ Math.ceil(timeObj.org.s) }} instead of {{ timeObj.s }} it seems to be working fine.