Vuejs 上的 Momentjs 倒数计时器答案

【问题标题】：Momentjs Countdown timer on VuejsVuejs 上的 Momentjs 倒数计时器
【发布时间】：2021-02-11 16:07:14
【问题描述】：

我正在尝试创建一个计数器计时器为 5 分钟的 vuejs 页面。（即 5:00 ... 4:59.. 等等..）我以前从未使用过 momentjs，我阅读了 moment 文档但无法理解它的实现。我感谢有人帮助我实施它。我是一名学习者。

<template>
  <div>{{ time }}</div>
</template>
<script>
var moment = require("moment");
export default {
  data() {
    return {
      time: "",
    };
  },
  mounted() {},
  methods: {},
};
</script>

【问题讨论】：

您只想为此目的使用时刻？
@kissu 我正在尝试了解 momentjs，所以是的
momentjs 本身已弃用，我确实引用了主页：“考虑在您的项目中使用 Moment？可能有更好的现代替代方案。”如果你愿意，我可以给你一个 date-fns 或类似的例子，但你现在不应该使用 momentjs。对于这种东西，甚至使用类似momentjs的东西也可能有点矫枉过正。
这是一个较老的项目，对momentjs有很多依赖，所以如果有解决方案会很有帮助

标签： javascript vue.js vuejs2

【解决方案1】：

这里有一个托管解决方案：https://codesandbox.io/s/so-countdown-vuejs-momentjs-96hdw?file=/src/App.vue

这里是如何使用 momentjs 在 Vuejs 中进行倒计时

<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>

【讨论】：

您是否只使用 moment 进行格式化？设置的时间间隔对我的工作不准确，计时器长期漂移。
在这里我找到了一些东西，但不知道如何设置 5 分钟时间stackoverflow.com/a/52048524/15192023
我实现了与您的解决方案相同的东西，但实际上，在那之后我需要添加更多逻辑。 settimeout, Setinterval 对于较长时间的运行不一致。如果浏览器处于非活动状态或选项卡已更改，他们的时间会浪费很多。 stackoverflow.com/a/29972322/15192023，这是我现在面临的问题。

【解决方案2】：

 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);

不要忘记添加间隔计时器，否则计时器会更早启动

【讨论】：