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 相关文章推荐
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
浅谈Sizzle的“编译原理”
Apr 14 Javascript
javascript实现省市区三级联动下拉框菜单
Nov 17 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
Apr 28 Javascript
Vue组件的使用教程详解
Jan 05 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
webpack打包并将文件加载到指定的位置方法
Feb 22 Javascript
jQuery插件jsonview展示json数据
May 26 jQuery
webstorm+vue初始化项目的方法
Oct 18 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 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
php pack与unpack 摸板字符字符含义
2009/10/29 PHP
php导入excel文件到mysql数据库的方法
2015/01/14 PHP
简单了解WordPress开发中update_option()函数的用法
2016/01/11 PHP
提交表单后 PHP获取提交内容的实现方法
2016/05/25 PHP
javascript的函数
2007/01/31 Javascript
有一段有意思的代码-javascript现实多行信息
2007/08/26 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
js静态方法与实例方法分析
2011/07/04 Javascript
jQuery制作简洁的多级联动Select下拉框
2014/12/23 Javascript
javascript使用smipleChart实现简单图表
2015/01/02 Javascript
jquery实现表单验证简单实例演示
2015/11/23 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
微信小程序 SocketIO 实例讲解
2016/10/13 Javascript
使用vue和datatables进行表格的服务器端分页实例代码
2017/06/07 Javascript
JS沙箱模式实例分析
2017/09/04 Javascript
基于vue中对鼠标划过事件的处理方式详解
2018/08/22 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
微信小程序上传图片到php服务器的方法
2019/05/23 Javascript
Python的面向对象思想分析
2015/01/14 Python
Python设计模式编程中解释器模式的简单程序示例分享
2016/03/02 Python
深入理解Python中装饰器的用法
2016/06/28 Python
python实现图书管理系统
2018/03/12 Python
ZABBIX3.2使用python脚本实现监控报表的方法
2019/07/02 Python
Python流程控制 while循环实现解析
2019/09/02 Python
Python命令行click参数用法解析
2019/12/19 Python
python使用建议与技巧分享(二)
2020/08/17 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
生产主管岗位职责
2013/11/10 职场文书
幼儿园园长岗位职责
2013/11/26 职场文书
后备干部考察材料
2014/02/12 职场文书
迎元旦广播稿
2014/02/22 职场文书
化学工程专业求职信
2014/08/10 职场文书
出差报告范文
2014/11/06 职场文书
民事诉讼代理词
2015/05/25 职场文书
mysql 带多个条件的查询方式
2021/06/05 MySQL