Vue中如何解决setTimeout和setInterval无效报错的问题？

本文共计444个文字，预计阅读时间需要2分钟。

1. 在Vue项目中的JavaScript代码语法与之前使用JavaScript和jQuery相比，有何出入？近期遇到一个点击按钮显示倒计时30秒的效果，发现两个函数对定时器setTimeOut和setInterval的使用都出现错误，这可能是由于对定时器使用的理解不足。

1.在vue项目中的js代码语法与之前使用js和jquery还是有所出入的，现遇到一个点击按钮出现倒计时30S的效果

相信大家对着两个函数都陌生，就是一个定时器，setTimeOut只执行一次，而setInterval会重复执行

需要注意的是：在setInterval不用的时候一定要用clearSetInterval关闭定时器。

2.按照最原始的倒计时效果，实现如下：

//获取30s 控制操作倒计时 time(){ if(this.timeWait <= 0){ this.timeWait = 0; return; }else{ this.timeWait--; } setTimeout(function(){ this.time(); }, 1000) },

此处出现了错误，报错信息为time未定义，此处对于定时器方法其实并没有错

3.原因是 老生常谈的javaScript 的this 的问题。

因为用的一个

function(){

}

这里的 独立的作用域 this指向了全局（这里是window）而且window里没有time这个函数报了错。