Vue2中 定时器 clearInterval(),结束定时器无效,已解决!
Vue中 定时器 clearInterval(),结束定时器无效,已解决!
·
描述:
在vue中,我在某个页面加载后,开启了一个定时器,但是当我,通过路由,离开页面后,我进行了销毁组件停止计时器 的操作,乍一看,这样的操作没有任何问题,但是当我去到新页面后,计时器却依然在调用,解决了很久,才发现问题所在并解决!
解决前有问题的代码
mounted() {
this.timer = setInterval(() => { // 在页面加载后开启一个定时器
this.totalreq();
console.log("定时器调用");
}, 5000)
},
methods: {
cliak(){
this.$destroy() //触发beforeDestroy 钩子函数
this.$router.push({
path: "/staff",
});
}
}
beforeDestroy() {
clearInterval(this.timer) //结束定时器,
console.log(this.timer, "销毁组件");
}
解决
采用监听事件 vm.$once
问题原因是 setInterval 计时器本身是由全局window 调用,所以 计时器的事件 不能绑定在 组件的的 this 身上,只能 绑定在 普通变量身上
mounted() {
this.totalreq();
const timer = setInterval(() => { //绑定在 const 普通变量身上,不要绑定在 this上
this.totalreq();
console.log("继续调用");
}, 5000)
this.$once('hook:beforeDestroy', () => { //再通过事件监听,监听到 组件销毁 后,再执行关闭计时器。
clearInterval(timer);
})
},
解决完成!
更多推荐
已为社区贡献3条内容
所有评论(0)