vue页面的定时刷新setInterval()
setInterval() 方法可按照指定的周期(以毫秒计)不停地调用函数或表达式,直到clearInterval()被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。提示:如果你只想执行一次可以使用setTimeout()方法。在该图上已经标注了触发和清除的时期,那么我们在使用中还有几个需要注...
·
setInterval() 方法
可按照指定的周期(以毫秒计)不停地调用函数或表达式,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
注:定时器的this是指向 window的
提示: 如果你只想执行一次可以使用 setTimeout() 方法。
在该图上已经标注了触发和清除的时期,那么我们在使用中还有几个需要注意的点。
- 使用setInterval时this指向的问题。如果我们直接
this.timer = setInterval(function(){要触发的函数})
是会报错的。因为这样的话this的指向为window,但是我们要触发的函数是挂载在vm实例上面的。可以直接这样写this.timer = setInterval(() => {要触发的函数})
. - 使用mouted,beforeDestory时注意他们是和method平级的。
demo:
在destroyed的时候清除页面刷新的。
getMigrateDetail()替换成自己的函数就ok了。
mounted不能获取到data中数据的解决方法:
mounted(){
console.log(this.isok) //能获取isok 10
setInterval(function(){
console.log(this.isok) //不能获取 isok
}, 3000);
}
这是为什么呢?
原因就是:定时器的this是指向 window的。
那有什么方法来解决这个问题呢?答案是有的,两种
(1)用箭头函数:箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue;
mounted(){
setInterval(()=>{ consolog.log(this.isok) }, 3000);
}
(2)使用 var that = this ,就可以正常调用了。
mounted(){
var that=this;
setInterval(()=>{
console.log(that.isok)
}, 3000);
}
参考:https://blog.csdn.net/weixin_38858002/article/details/82114774
更多推荐
已为社区贡献3条内容
所有评论(0)