vue beforeDestroy clearInterval清除定时器失效的解决
更新时间：2023年06月29日 09:10:38 作者：啃代码的毛毛虫
这篇文章主要介绍了vue beforeDestroy clearInterval清除定时器失效的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue beforeDestroy clearInterval清除定时器失效
我发现遇到这个问题的人挺多的，自己遇到过，改别人代码的时候也遇到过，赶紧记下来~这方法好使~
情景
路由跳转时触发了beforeDestroy，里面也写了清除计时器的相关代码，但是到其他页面时还是在一直执行。
// 父组件 某条件触发路由跳转，定时器在/xxx中一直调用
router.push('/xxx')
// 子组件
mounted() {
this.timer = setInterval(()=>{
this.heartbeat();
},5000);
},
beforeDestroy(){
// 页面离开时断开连接,清除定时器
console.log( '------------' );
clearInterval(this.timer);
},解决方法
使用程序化的事件侦听器，试试这个：
mounted: function () {
var timer = setInterval(()=>{
this.heartbeat();
},5000);
// 通过 $once 来监听定时器，在 beforeDestroy 钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
}vue中切换页面清除定时器
data中定义全局变量
intervalFlag: "",
mounted中创建定时器
5分钟执行一次loadTable方法
this.intervalFlag = setInterval(() => {
this.loadTable();
}, 1000 * 5 * 60);destroyed中清除定时器
destroyed () {
//清空定时任务
if (this.intervalFlag) {
clearTimeout(this.intervalFlag);
this.intervalFlag = null;
}
var lastTimeoutId = setTimeout(";");
for (var i = 0; i <= lastTimeoutId._id; i++) {
clearTimeout(i);
}
},总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
下面小编就为大家带来一篇简单谈谈vue的过渡动画(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
vue2中Print.js的使用超详细讲解（pdf、html、json、image）
项目中有用到打印功能,网上就找了print.js,下面这篇文章主要给大家介绍了关于vue2中Print.js使用（pdf、html、json、image）的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03
本篇文章主要介绍了VUE中v-model和v-for指令详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了Vue.js中引入图片路径的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-06-06
这篇文章主要介绍了Vue实现户籍管理系统户籍信息的添加与删除方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
正则表达式是由一些特定的字符组成,代表一个规则,可以用来检验数据格式是否合法,也可以在一段文本中查找满足要求的内容,这篇文章主要给大家介绍了关于VUE正则表达式用法的相关资料,需要的朋友可以参考下2024-02-02
这篇文章主要介绍了Vue向下滚动加载更多数据scroll案例详解,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-08-08
这篇文章主要介绍了Vue3如何在setup中获取元素引用(ref)问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要为大家介绍了vue运用之vuex持久化，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-12-12
今天小编就为大家分享一篇解决vue-router 二级导航默认选中某一选项的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
最新评论