vue中销毁定时器
vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。场景:在A.vue页面有一个定时a,然后跳转到B.vue页面,此时A页面的定时器a依然在运行。解决方式一:然后在mounted里使用定时器;最后在beforeDestroy里清除定时器;解决方式二:通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器。解决方式三:
·
vue是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。
场景:在A.vue页面有一个定时a,然后跳转到B.vue页面,此时A页面的定时器a依然在运行。
解决方式一:
- 首先在data里进行定义定时器;
data() {
return {
timer: null // 定时器名称
}
},
- 然后在mounted里使用定时器;
this.timer= setInterval(() => {
// 操作
method();
}, 60000);
- 最后在beforeDestroy里清除定时器;
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},
解决方式二:
通过$once这个事件侦听器在定义完定时器之后的位置来清除定时器。
this.timer= setInterval(() => {
// 操作
method();
}, 60000);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer);
})
解决方式三:
beforeRouteLeave(to, from, next){
next();
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},
更多推荐
已为社区贡献9条内容
所有评论(0)