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


Posted in Javascript onJuly 30, 2020

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函数无效报错的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
利用javascript数组长度循环数组内所有元素
Dec 27 Javascript
如何编写高质量JS代码
Dec 28 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
Feb 13 Javascript
javascript结合Canvas 实现简易的圆形时钟
Mar 11 Javascript
Javascript编程中几种继承方式比较分析
Nov 28 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
Jquery实现跨域异步上传文件总结
Feb 03 Javascript
vue.js的computed,filter,get,set的用法及区别详解
Mar 08 Javascript
使用jQuery给Table动态增加行、清空table的方法
Sep 05 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 jQuery
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 Javascript
微信小程序地图绘制线段并且测量(实例代码)
Jan 02 Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 #Javascript
详解JavaScript自定义函数
Jul 29 #Javascript
深入了解JavaScript词法作用域
Jul 29 #Javascript
vue监听dom大小改变案例
Jul 29 #Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
详解JavaScript作用域 闭包
Jul 29 #Javascript
Angular+ionic实现折叠展开效果的示例代码
Jul 29 #Javascript
You might like
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
PHP封装的MSSql操作类完整实例
2016/05/26 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
Aster vs KG BO3 第二场2.18
2021/03/10 DOTA
javascript Base类 包含基本的方法
2009/07/22 Javascript
JS 遮照层实现代码
2010/03/31 Javascript
JavaScript调用Activex控件的事件的实现方法
2010/04/11 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
2013/03/27 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
AngularJS学习笔记之ng-options指令
2015/06/16 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
超全面的javascript中变量命名规则
2017/02/09 Javascript
页面间固定参数,通过cookie传值的实现方法
2017/05/31 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
python持久性管理pickle模块详细介绍
2015/02/18 Python
在Python的循环体中使用else语句的方法
2015/03/30 Python
介绍Python的Django框架中的静态资源管理器django-pipeline
2015/04/25 Python
Python2.7下安装Scrapy框架步骤教程
2017/12/22 Python
Python及Django框架生成二维码的方法分析
2018/01/31 Python
使用Python监控文件内容变化代码实例
2018/06/04 Python
python绘制地震散点图
2019/06/18 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
python解释器spython使用及原理解析
2019/08/24 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
匡威帆布鞋美国官网:Converse美国
2016/08/22 全球购物
营销与策划专业毕业生求职信
2013/11/01 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
电子商务优秀毕业生求职信
2014/07/11 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
vue-cli3.0修改打包后的文件名和文件地址,打包后本地运行报错解决
2022/04/06 Vue.js