网络编程 
首页 > 网络编程 > 浏览文章

vue 解决setTimeOut和setInterval函数无效报错的问题

(编辑:jimmy 日期: 2024/11/7 浏览:3 次 )

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这个函数报了错。

4.用过vue的朋友应该,基本vue中都是this.XXX这样写。这里的this是Vue对象。

所以为了使this正确指向vue,我用了ES6的尖头函数。

setTimeout(() => {
  this.time();
}, 1000)

尖头函数因为它的特殊性,它的this指向它外层的对象。

补充知识:Vue使用Element UI,校验不生效

vue中v-model=v-bind+v-on(@)

所以习惯使用v-model

今天使用Element UI 的el-form

发现el-input无论填什么值校验都过不了,百思不解

最后把v-model改为:model解决

然后看了下文档,确实使用的是:model绑定

真是个弱智的问题

vue 解决setTimeOut和setInterval函数无效报错的问题

以上这篇vue 解决setTimeOut和setInterval函数无效报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。

上一篇:vue setInterval 定时器失效的解决方式
下一篇:浅谈vue 组件中的setInterval方法和window的不同
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。