小记VUE下setTimeOut和setInterval遇到的问题
来源:互联网 发布:java五子棋视频教程 编辑:程序博客网 时间:2024/05/21 12:50
相信大家对着两个函数都陌生,就是一个定时器,setTimeOut只执行一次,而setInterval会重复执行
需要注意的是:在setInterval不用的时候一定要用clearSetInterval关闭定时器。
说一下最近开发中遇到的问题,我是用vue开发的,顺便记录这个错误。
我需要轮询接口,所以使用setInterval。
// 我是想没2秒执行一次myFunc这个函数。setInterval(this.myFunc(),2000)//某个函数myFunc () { console.log(123)}
但实际的运行结果是,只执行了一遍,并没有循环执行。
原因是setInterval接受两个参数,第一个为要执行的函数,第二个为时间(毫秒)。
这里我犯的错误是,我写的是一个函数的执行this.myFunc()
因为加了()是一个执行,而不是个函数。
于是我又改成这样写了,在写个匿名函数,函数体是我要执行的。
setInterval(function () { this.myFunc()},2000)//某个函数myFunc () { console.log(123)}
理论上这样是没问题的,会每2秒执行一次this.myFunc(),但却报错了。
原因是 老生常谈的javaScript 的this 的问题。
因为用的一个function(){} 这里的 独立的作用域 this指向了全局(这里是window)而且window里没有myFunc这个函数,所报了错。
用过vue的朋友应该,基本vue中都是this.XXX这样写。这里的this是Vue对象。
所以为了使this正确指向vue,我用了ES6的尖头函数。
最终
setInterval(() => { this.myFunc()},2000)//某个函数myFunc () { console.log(123)}
尖头函数因为它的特殊性,它的this指向它外层的对象。
其实主要说的是第二个问题,第一个属于对函数不熟悉,第二个则是VUE,ES6,this指向综合的问题。
阅读全文
0 0
- 小记VUE下setTimeOut和setInterval遇到的问题
- javascript setInterval和setTimeout的this问题
- requireJS中使用setTimeout和setInterval遇到的问题和解决方式
- 使用setTimeout或setInterval时遇到的问题总结
- setTimeout 和 setInterval 的区别
- setTimeout 和 setInterval 的区别
- setTimeout 和 setInterval 的区别
- setTimeout 和 setInterval 的区别
- setTimeout 和 setInterval 的区别.
- settimeout 和 setinterval 的区别
- setTimeout 和 setInterval 的区别.
- setTimeout和setInterval的使用
- setTimeout 和 setInterval 的区别
- setTimeout和setInterval的使用
- setTimeout和setInterval的使用
- setInterval 和 setTimeout 的用法
- setTimeout 和 setInterval 的区别
- setTimeout和setInterval的使用
- XSS漏洞定位和修复方法——htmlspecialchars() 函数
- SQL Server2008 学习之(十四):T-SQL语言基础(下)
- Java中Collection和Collections的区别
- QML 之 real 数据保留小数点后两位
- JavaScript
- 小记VUE下setTimeOut和setInterval遇到的问题
- ROS学习笔记(八)
- idea控制台乱码
- [操作系统] 虚拟内存
- Python字符编码详解
- DoS与DDoS小结
- Android换肤技术总结
- 小程序页面pv统计数过高,导致页面转化率低问题
- logback logback.xml常用配置详解(二)<appender>