Vue 使用定时器定时刷新页面
data(){return {intervalId:null}},methods:{// 定时刷新数据函数dataRefreh() {// 计时器正在进行中,退出函数if (this.intervalId != null) {return;}// 计时器为空,操作this.intervalId = setInterval(() => {c
·
方法
data(){
return {
intervalId:null
}
},
methods:{
// 定时刷新数据函数
dataRefreh() {
// 计时器正在进行中,退出函数
if (this.intervalId != null) {
return;
}
// 计时器为空,操作
this.intervalId = setInterval(() => {
console.log("刷新" + new Date());
this.initData(); //加载数据函数
}, 5000);
},
// 停止定时器
clear() {
clearInterval(this.intervalId); //清除计时器
this.intervalId = null; //设置为null
},
},
created(){
this.dataRefreh();
},
destroyed(){
// 在页面销毁后,清除计时器
this.clear();
}
-
首先选择数据刷新的时机,在
created
中 -
声明计时器,与数据刷新函数
-
在页面销毁的时机(
destroyed
),关闭计时器等耗时操作
什么时候触发和销毁
created
:在这个时期定义的方法都可以使用,可以在这个时期触发页面的定时刷新
mounted
:在元素挂载之后去触发
beforeDestroy
:在当前页面被销毁的时候清除
问题:
1. 使用setInterval
时this
指向的问题
如果我们直接
this.timer = setInterval(function(){要触发的函数})
是会报错的。因为这样的话this的指向为window,但是我们要触发的函数是挂载在vm实例上面的。所以这个时候就是箭头函数发挥用处的时候了。我们可以直接这样写this.timer = setInterval(() => {要触发的函数})
2. 使用mouted
,beforeDestory
时注意他们是和method
平级的
mouted(){
if(this.timer){
clearInterval(this.timer)
} else {
thjis.timer = setInterval(() => {
this.getMigrateDetail();
},1800000)
}
},
destroyed(){
clearImterval(this.timer);
}
这里的getMigrateDetail()
是自己定义的一个函数,大家在实现的时候只需要把它替换成自己的函数就ok了
更多推荐
已为社区贡献1条内容
所有评论(0)