Question

我尝试使用Vue.js构建一个计时器，我希望它输出剩余的时间。

new Vue({
    el: "#app",
    data: {
        timer: 25,
        message2: "",
        counter: false,
        interval: null
    },
    methods: {
        startTimer() {
            this.interval = setInterval(this.countDown(), 1000);
        },
        countDown() {
            if (this.counter === false) {
                var n = this.timer;
                this.counter = true;
            } else if (n > 0) {
                n -= 1;
                this.message2 = "You have " + n + "seconds left.";
            } else {
                clearInterval(this.interval);
                this.counter = false;
                this.message2 = "Your time is up!"
            }
        },

但每次Interval运行函数message2时，我都无法更新countDown()。实际上它并不是每秒都运行一次，而只是运行一次。

Answer 1

您应该将函数传递给setInterval，但由于您立即执行this.countDown，因此您将该调用的结果传递给{ {1}}：

setInterval

传递函数而不是调用它，省略startTimer() { this.interval = setInterval(this.countDown(), 1000); }

()

另外，我修复了startTimer() { this.interval = setInterval(this.countDown, 1000); }中的一些错误（例如在countdown()分支中定义n，但在if中使用它，所以它是else if在那里，或只更改本地undefined，这不会改变n ...）

this.timer

Answer 2

正如其他人所指出的那样，你需要将你的函数传递给setInterval，而不是调用它并传递它的返回值。

此外，当您执行语句n = this.timer时，您正在调用Vue在this.timer上设置的getter，并将非虚拟数字25复制到变量n。当函数返回并且25的副本丢失时，n会超出范围。下次运行函数（稍后一秒）n未定义。这会导致您的else子句清除间隔。你的elseif子句永远不会运行。

我认为让您的代码工作的最小变化是促使n存入您的数据：向您的数据添加n: undefined,：{}，以便Vue可以跟踪它，然后将n的所有用途替换为this.n。

一旦你开始工作，我建议简化一些事情：

设置this.n = this.timer可能应该在startTimer
如果您在清除时间间隔时设置this.interval = undefined，则this.counter会变得多余，因为您只需检查this.interval是否真实
您可以将message2转换为“计算”
你可以在startTimer中添加一个if子句，以防止在已经有一个有效的情况下添加第二个间隔（例如，如果有人在计时器运行之前点击了两次“启动计时器”按钮）

Vue.js时间计数器

2 个答案: