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的两个ListBox子项互相调整的实现代码
May 07 Javascript
js获得地址栏?问号后参数的方法
Aug 08 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
逐一介绍Jquery data()、Jquery stop()、jquery delay()函数(详)
Nov 04 Javascript
js实现不重复导入的方法
Mar 02 Javascript
BootStrap的JS插件之轮播效果案例详解
May 16 Javascript
js中数组插入、删除元素操作的方法
Feb 15 Javascript
JS限制输入框输入的实现代码
Jul 02 Javascript
vue 实现边输入边搜索功能的实例讲解
Sep 16 Javascript
Vue.js轮播图走马灯代码实例(全)
May 08 Javascript
Vue 修改网站图标的方法
Dec 31 Vue.js
Axios代理配置及封装响应拦截处理方式
Apr 07 Vue.js
浅谈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
Smarty模板快速入门
2007/01/04 PHP
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
php数组使用规则分析
2015/02/27 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
Yii2.0多文件上传实例说明
2017/07/24 PHP
通过源码解析Laravel的依赖注入
2018/01/22 PHP
用javascript动态调整iframe高度的代码
2007/04/10 Javascript
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
2010/04/01 Javascript
js中格式化日期时间型数据函数代码
2010/11/08 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
javascript常用对话框小集
2013/09/13 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
浅谈JavaScript中的作用域和闭包问题
2015/07/07 Javascript
angular.bind使用心得
2015/10/26 Javascript
Bootstrap创建可折叠的组件
2016/02/23 Javascript
Javascript技术栈中的四种依赖注入小结
2016/02/27 Javascript
require.js配合插件text.js实现最简单的单页应用程序
2016/07/12 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
jquery请求servlet实现ajax异步请求的示例
2017/06/03 jQuery
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
angular4中关于表单的校验示例
2017/10/16 Javascript
vue 使用vue-i18n做全局中英文切换的方法
2018/10/29 Javascript
Python中的深拷贝和浅拷贝详解
2015/06/03 Python
python3爬虫怎样构建请求header
2018/12/23 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
Django如何简单快速实现PUT、DELETE方法
2019/07/24 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
学习Python爬虫的几点建议
2020/08/05 Python
超市实习总结自我鉴定
2013/09/19 职场文书
离职证明标准格式
2014/09/15 职场文书
校园安全广播稿范文
2014/09/25 职场文书
GTX1660显卡搭配显示器推荐
2022/04/19 数码科技