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


Posted in Javascript onJuly 21, 2020

直接上代码,以下

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组件销毁之后计时器继续执行的问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI 开源插件套装 完全替代ExtJS
Mar 24 Javascript
js 设置选中行的样式的实现代码
May 24 Javascript
JavaScript中获取元素索引的函数
Sep 10 Javascript
js中的数组Array定义与sort方法使用示例
Aug 29 Javascript
JavaScript自定义方法实现trim()、Ltrim()、Rtrim()的功能
Nov 03 Javascript
IE中鼠标经过option触发mouseout的解决方法
Jan 29 Javascript
jQuery实现的经典滑动门效果
Sep 22 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
Javascript动画效果(4)
Oct 11 Javascript
4个顶级开源JavaScript图表库
Sep 29 Javascript
es6中let和const的使用方法详解
Feb 24 Javascript
vue 实现setInterval 创建和销毁实例
Jul 21 #Javascript
解决vue.js中settimeout遇到的问题(时间参数短效果不稳定)
Jul 21 #Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 #Javascript
解决vue 使用setTimeout,离开当前路由setTimeout未销毁的问题
Jul 21 #Javascript
JavaScript undefined及null区别实例解析
Jul 21 #Javascript
Vue 解决父组件跳转子路由后当前导航active样式消失问题
Jul 21 #Javascript
Vue切换组件实现返回后不重置数据,保留历史设置操作
Jul 21 #Javascript
You might like
解析php框架codeigniter中如何使用框架的session
2013/06/24 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
IE和Mozilla的兼容性汇总event
2007/08/12 Javascript
JS 判断undefined的实现代码
2009/11/26 Javascript
jQuery学习4 浏览器的事件模型
2010/02/07 Javascript
javascript代码编写需要注意的7个小细节小结
2011/09/21 Javascript
jQuery-Tools-overlay 使用介绍
2012/07/14 Javascript
js arguments对象应用介绍
2012/11/28 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
JSON序列化与解析原生JS方法且IE6和chrome测试通过
2013/09/05 Javascript
Javascript基础 函数“重载” 详细介绍
2013/10/25 Javascript
自定义刻度jQuery进度条及插件
2015/09/02 Javascript
jQuery+css实现炫目的动态块漂移效果
2016/01/28 Javascript
JS获取年月日时分秒的方法分析
2016/11/28 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
VueJS 取得 URL 参数值的方法
2019/07/19 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
vue cli4下环境变量和模式示例详解
2020/04/09 Javascript
vue实现自定义多选按钮
2020/07/16 Javascript
JavaScript实现通讯录功能
2020/12/27 Javascript
[01:04:01]2014 DOTA2华西杯精英邀请赛5 24 DK VS VG
2014/05/25 DOTA
wxpython中利用线程防止假死的实现方法
2014/08/11 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
学习python之编写简单简单连接数据库并执行查询操作
2016/02/27 Python
基于Django ORM、一对一、一对多、多对多的全面讲解
2019/07/26 Python
OpenCV+face++实现实时人脸识别解锁功能
2019/08/28 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
Python如何在main中调用函数内的函数方式
2020/06/01 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
一百多行代码实现react拖拽hooks
2021/03/23 Javascript
MySQL 隔离数据列和前缀索引的使用总结
2021/05/14 MySQL
关于python类SortedList详解
2021/09/04 Python
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android