解决vue组件销毁之后计时器继续执行的问题

369 阅读 0 评论 244 点赞

我是靠谱客的博主端庄煎蛋，最近开发中收集的这篇文章主要介绍解决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组件销毁之后计时器继续执行的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持靠谱客。