1

I'm trying to create a vuejs page with a counter timer of 5 minutes. (ie 5:00 ... 4:59.. so on..) I never used momentjs before, I read moment docs but can't understand the implementation for it. I appreciate someone helps me to implement it. I'm a learner.

<template>
  <div>{{ time }}</div>
</template>
<script>
var moment = require("moment");
export default {
  data() {
    return {
      time: "",
    };
  },
  mounted() {},
  methods: {},
};
</script>
nandhini mridula
  • 11
  • 2
  • You want to use moment only for this purpose ? – kissu Feb 11 '21 at 16:25
  • @kissu im trying to learn about momentjs so yes – nandhini mridula Feb 11 '21 at 16:27
  • `momentjs` deprecated itself, I do quote the homepage: "Considering using Moment in your project? There may be better modern alternatives." I can give you an example with `date-fns` or alike if you want but you should not use momentjs nowadays. And for this kind of stuff, it may also be a bit overkill to even use something alike `momentjs`. – kissu Feb 11 '21 at 16:29
  • it is an older project which has momentjs dependency a lot, so it will be really helpful if the solution is there – nandhini mridula Feb 11 '21 at 16:40

2 Answers2

3

There is a hosted solution here: https://codesandbox.io/s/so-countdown-vuejs-momentjs-96hdw?file=/src/App.vue

Here is how to do a countdown in Vuejs with momentjs

<template>
  <div>{{ formatedCountdown || 'countdown over' }}</div>
</template>

<script>
import * as moment from 'moment'
import 'moment-duration-format'

export default {
  data() {
    return {
      countdown: 300, // 5min
    }
  },
  mounted() {
    const stopCountdown = setInterval(() => {
      console.log('current countdown', this.countdown)
      this.countdown -= 1
      if (!this.countdown) clearInterval(stopCountdown)
    }, 1000)
  },
  computed: {
    formatedCountdown() {
      return moment.duration(this.countdown, 'seconds').format('m:ss')
    },
  },
}
</script>
kissu
  • 40,416
  • 14
  • 65
  • 133
  • are you using moment for only formatting? set interval is not accurate for my work, the timer is drifting in long run. – nandhini mridula Feb 12 '21 at 03:13
  • Here i found something but dont know how to set for 5 minutes time https://stackoverflow.com/a/52048524/15192023 – nandhini mridula Feb 12 '21 at 03:16
  • I implemented something same as your solution, but actually, I need to add more logic after that. settimeout, Setinterval are not consistent for longer runs. their time is drifting a lot if the browser is inactive or tabs have been changed. https://stackoverflow.com/a/29972322/15192023, this is the problem im facing now. – nandhini mridula Feb 12 '21 at 07:58
0
 const interval = 1000;
  const expected = moment();
  expected.add(interval, "milliseconds");
  expected.add(10, "seconds");

  //create acurate timer between two dates
  const timer = setInterval(() => {
    //calculate the difference between now and expected
    const diff = moment.duration(expected.diff(moment()));

    if (diff < 0) {
      clearInterval(timer);
      this.status = "none";
    }

    //format diff to minutes:seconds
    this.timeRemainingToEnd = moment.utc(diff.asMilliseconds());
  }, interval);

Don't forget to add the interval timer or the timer will start earlier

hamon
  • 103
  • 3
  • 9