解决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 常用操作方法
Jan 28 Javascript
JavaScript 编写匿名函数的几种方法
Feb 21 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
Oct 17 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
iframe子页面获取父页面元素的方法
Nov 05 Javascript
JavaScript第一篇之实现按钮全选、功能
Aug 21 Javascript
ES2015 Symbol 一种绝不重复的值
Dec 25 Javascript
认识less和webstrom的less配置方法
Aug 02 Javascript
vue 项目如何引入微信sdk接口的方法
Dec 18 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
JavaScript ES6的函数拓展
Jan 18 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
星际争霸秘籍
2020/03/04 星际争霸
把1316这个数表示成两个数的和,其中一个为13的倍数,另一个是11的倍数,求这两个数。
2011/06/24 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
PHP使用PHPExcel删除Excel单元格指定列的方法
2016/07/06 PHP
php封装的验证码类分享
2017/02/26 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
使用Entrust扩展包在laravel 中实现RBAC的功能
2020/03/16 PHP
判断页面是关闭还是刷新的js代码
2007/01/28 Javascript
js option删除代码集合
2008/11/12 Javascript
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
nodejs中操作mysql数据库示例
2014/12/20 NodeJs
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
jQuery之简单的表单验证实例
2016/07/07 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
NodeJS实现客户端js加密
2017/01/09 NodeJs
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
2017/01/24 Javascript
javascript+jQuery实现360开机时间显示效果
2017/11/03 jQuery
原生JS实现网页手机音乐播放器 歌词同步播放的示例
2018/02/02 Javascript
微信小程序通过保存图片分享到朋友圈功能
2018/05/24 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
python实现字典(dict)和字符串(string)的相互转换方法
2017/03/01 Python
Ubuntu下Python2与Python3的共存问题
2018/10/31 Python
OpenCV+Python识别车牌和字符分割的实现
2019/01/31 Python
Python实现求两个数组交集的方法示例
2019/02/23 Python
python numpy生成等差数列、等比数列的实例
2020/02/25 Python
Python日志:自定义输出字段 json格式输出方式
2020/04/27 Python
台湾演唱会订票网站:StubHub台湾
2019/06/11 全球购物
几个Shell Script面试题
2012/08/31 面试题
教师个人的自我评价分享
2014/01/02 职场文书
优秀老师事迹材料
2014/02/05 职场文书
债务追讨授权委托书范本
2014/10/16 职场文书
收银员岗位职责范本
2015/04/07 职场文书
Django给表单添加honeypot验证增加安全性
2021/05/06 Python