解决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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
javascript的onchange事件与jQuery的change()方法比较
Sep 28 Javascript
JS读取XML文件示例代码
Nov 15 Javascript
jquery ajax传递中文参数乱码问题及解决方法说明
Feb 07 Javascript
JavaScript使用pop方法移除数组最后一个元素用法实例
Apr 06 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
vue使用xe-utils函数库的具体方法
Mar 06 Javascript
Vue2.0实现调用摄像头进行拍照功能 exif.js实现图片上传功能
Apr 28 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 jQuery
element的el-table中记录滚动条位置的示例代码
Nov 06 Javascript
使用JavaScript通过前端发送电子邮件
May 22 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 中include()与require()的对比
2006/10/09 PHP
Discuz Uchome ajaxpost小技巧
2011/01/04 PHP
PHP新手用的Insert和Update语句构造类
2012/03/31 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
浅谈ThinkPHP的URL重写
2014/11/25 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
JQuery Tips(4) 一些关于提高JQuery性能的Tips
2009/12/19 Javascript
js函数的延迟加载实现代码
2012/10/11 Javascript
js模拟滚动条(横向竖向)
2013/02/22 Javascript
JQuery实现用户名无刷新验证的小例子
2013/03/22 Javascript
基于jquery实现鼠标左右拖动滑块滑动附源码下载
2015/12/23 Javascript
Javascript HTML5 Canvas实现的一个画板
2020/04/12 Javascript
老生常谈js动态添加事件--- 事件委托
2016/07/19 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
vue项目打包后提交到git上为什么没有dist这个文件的解决方法
2020/09/16 Javascript
[52:44]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第一场 6.3
2018/06/04 DOTA
简单分析Python中用fork()函数生成的子进程
2015/05/04 Python
Python 含参构造函数实例详解
2017/05/25 Python
python实现稀疏矩阵示例代码
2017/06/09 Python
Python 实现数据结构-堆栈和队列的操作方法
2019/07/17 Python
Django重设Admin密码过程解析
2020/02/10 Python
python rolling regression. 使用 Python 实现滚动回归操作
2020/06/08 Python
利用CSS3实现毛玻璃效果示例源码
2016/09/25 HTML / CSS
IE10 Error.stack 让脚本调试更加方便快捷
2013/04/22 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
Amara德国:家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
军校本科大学生自我评价
2014/01/14 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
授权委托书怎么写
2014/04/03 职场文书
高中教师考核方案
2014/05/18 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
电力培训学习心得体会
2016/01/11 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
mysql分组后合并显示一个字段的多条数据方式
2022/01/22 MySQL
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电