Question

我遇到了一个我不知道如何解决的问题。

我有一个带有结束日期的组件，我想显示倒数计时器和剩余的秒数。

我使用了片刻JS，但我不知道如何在Vue2中实现它。

我应该使用计算方法吗？

        computed: {
            timer: function() {
                var now = moment();
                var then = moment().add(180, 'seconds');
                return moment().to(then);
                (function timerLoop() {
                    this.timer = countdown(then).toString();
                    requestAnimationFrame(timerLoop);
                })();
            },

问题是我必须在vue2显示之前返回该值。但我还必须使用requestAnimationFrame来每秒更新一次。

任何人都可以帮助我吗？使用它的最佳方法是什么？ setInterval或requestAnimationFrame？我认为后者，因为在1页上将有100多个计时器，所以性能是必要的。

这么久的故事，简短： Momentjs and countdown timer

如何创建Vue2函数/方法/ mixin？每秒更新一次？

由于

Answer 1

我没有为每个计时器设置一个时间循环，而是建议每隔一段时间更新模型上的一个值，并使用Vue的反应来触发对计算属性的更新。

I've created a pen where you easily can play around with number active timers to see how it impacts performance.

    data() {
        return {
            interval: null,
            now: new Date(),
            dates: [], // Your dates here
        }
    },
    computed() {
        timers() {
            return this.dates.map(then => moment(this.now).to(then))
        },
    },
    mounted() {
        this.interval = setInterval(() => {
            this.now = new Date()
        }, 1000)
    }

Vue2：Moment JS倒数计时器

1 个答案: