Vue的methods中定时器的变量报错问题

这是由于this的指向造成的。

普通函数的this谁调用它,它就指向谁,换句话说,普通函数中的this指向是变化的,指向使用函数时的指向。

而箭头函数不同,箭头函数的this指向是固定不变的,指向定义时的指向。

因此,当定时器异步执行时,执行环境已发生了变化,this指向了window,无法找到定义时指向的变量,所以会报错。

错误代码如下:

this.obj = setInterval(function() { // 1秒间隔定时器
	if (this.myTimer.seconds <= 0) {
		clearInterval(this.obj);
	} else {
		this.myTimer.seconds = this.myTimer.seconds - 1;
		this.myTimer.smsBtnText = "倒计时" + this.myTimer.seconds + "秒";
	}
}, 1000); 

正确代码如下:

this.obj = setInterval(() => { // 1秒间隔定时器
	if (this.myTimer.seconds <= 0) {
		clearInterval(this.obj);
	} else {
		this.myTimer.seconds = this.myTimer.seconds - 1;
		this.myTimer.smsBtnText = "倒计时" + this.myTimer.seconds + "秒";
	}
}, 1000);

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/ywl570717586/article/details/79963162
上一篇vue表单v-validate再次输入密码confirmed校验不通过问题
下一篇vue全局组件和局部组件的写法
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭