gpt4 book ai didi

javascript - Vue.JS 倒计时不起作用

转载 作者:行者123 更新时间:2023-11-30 15:44:59 25 4
gpt4 key购买 nike

我有一个 vue 应用程序,但倒计时效果不佳。其实我也不知道为什么。

查看 {{ $parent.timer }} 我看到了很好的值(value)。

View 数据:

data: function() {
return {
timer : 3,
...

这是我的倒计时功能:

countdown : function(time,callback)
{
//time is equal 5
this.timer = time;
//this.timer is equal 5
var timerInterval = undefined;

timerInterval = setInterval(function() {
if(this.timer == 1) {
this.timer = 0;
callback();
return clearInterval(timerInterval);
}
// First time undefined, in 2nd is NaN
this.timer -= 1;
// NaN
}, 1000);
}

调用函数:

this.countdown(data.time,function(){ //smtng });

我做错了什么?它在我的旧 Vue 应用程序中工作。

我希望有人能帮助我:)非常感谢!

最佳答案

这是 this 范围的问题,如下所述:

function() {...} 在内部创建一个新范围。如果您在此函数内使用 this,则它不会引用外部作用域。因此,您的 Vue 组件的 this.timer 不会从您的 setInterval() 中更新。

() => {...} 像函数一样工作,但不会在内部创建新范围。

检查以下代码是否有效:

timerInterval = setInterval(() => {
if(this.timer == 1) {
this.timer = 0; // `this` points to the scope of Vue component
callback();
// ...
}
// ...
}, 1000);

关于箭头函数的更多信息:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions

关于javascript - Vue.JS 倒计时不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40200917/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com