Vue.js时间计数器

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!"
}
},

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

Answer 1

你应该将一个函数传递给setInterval，但由于你立即执行this.countDown，你将调用的结果传递给setInterval：

startTimer() {
this.interval = setInterval(this.countDown(), 1000);
}

若要传递函数而不是调用它，请省略()

startTimer() {
this.interval = setInterval(this.countDown, 1000);
}

此外，我修复了countdown()中的一些错误(例如，在if分支中定义n，但在else if中使用它，所以它在那里undefined，或者只更改本地n，这不会改变this.timer......

countDown() {
var n = this.timer
if (!this.counter) {
this.counter = true;
} else if (n > 0) {
n = n - 1
this.timer = n
this.message2 = "You have " + n + "seconds left."
} else {
clearInterval(this.interval);
this.counter = false
this.message2 = "Your time is up!"
}
},

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可能应该在启动计时器中完成
• 如果您在清除间隔时设置了this.interval = undefined，this.counter变得多余，因为您可以检查this.interval是否真实
• 您可以将消息 2 转换为"计算">
• 您可以在 startTimer 中添加一个 if 子句，以防止在已经有一个活动间隔的情况下添加第二个间隔(例如，如果有人在计时器耗尽之前单击"启动计时器"按钮两次)