小记VUE下setTimeOut和setInterval遇到的问题

21 篇文章 0 订阅
12 篇文章 0 订阅

相信大家对着两个函数都陌生,就是一个定时器,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指向综合的问题。

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值