解决vue组件销毁之后计时器继续执行的问题
更新时间：2020年07月21日 10:51:43 作者：淵波太郎
这篇文章主要介绍了解决vue组件销毁之后计时器继续执行的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
直接上代码，以下
window.setTimeout(function(){
if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁
return;
}
window.location.href = "/serverMonitor?t="+ new Date().getTime();
}，5000）
很粗暴的方法，在执行之前看是否被销毁就行，
第二种方法，调用路由组件内的钩子函数beforeRouteLeave
beforeRouteLeave（to，from，next）{
clearTimeout（window.timer）；
next（）；
}
补充知识：vue销毁时事件，created和mounted&&activated的区别
我就废话不多说了，大家还是直接看代码吧~
// 关闭当前页面就会销毁监听事件（checkpay）
destroyed() {
clearInterval(this.checkpay)
}
created()在创建vue对象时，在html渲染之前就触发；但是注意created()只会触发一次； mounted（）在html渲染完成之后才会执行的；
activated()进入当前存在activated()函数的页面时，一进入页面就触发；可用于初始化页面数据等
以上这篇解决vue组件销毁之后计时器继续执行的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
Mock.js是一个模拟数据生成器,可以让前端独立于后端进行开发,下面这篇文章主要给大家介绍了关于使用Mockjs模拟接口实现增删改查、分页及多条件查询的相关资料,需要的朋友可以参考下2022-04-04
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync，今天小编带领大家学习下:visible.sync 的作用，感兴趣的朋友一起看看吧2022-11-11
这篇文章主要介绍了Vue.js在数组中插入重复数据的实现代码,需要的朋友可以参考下2017-11-11
Vue最巧妙的特性之一是其响应式系统,下面这篇文章主要给大家介绍了关于Vue.js响应式数据的简单实现方法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
本文将详细介绍通过Vue使多元素进行过渡动画,需要的朋友可以参考下2020-02-02
这篇文章主要为大家详细介绍了vue实现大转盘抽奖功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要介绍了vue如何使用watch监听指定数据的变化，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
今天小编就为大家分享一篇vue 利用路由守卫判断是否登录的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要介绍了<el-button>点击后如何跳转指定url链接问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
这篇文章主要为大家详细介绍了vue实现组件值的累加，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-09-09
最新评论