解决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条件判断使用小技巧总结
Sep 08 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
Apr 01 Javascript
Javascript isArray 数组类型检测函数
Oct 08 Javascript
js常用代码段收集
Oct 28 Javascript
js中的push和join方法使用介绍
Oct 08 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
键盘上一张下一张兼容IE/google/firefox等浏览器
Jan 28 Javascript
jquery 操作两个select实现值之间的互相传递
Mar 07 Javascript
jQuery后代选择器用法实例
Dec 23 Javascript
nginx配置React静态页面的方法教程
Nov 03 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 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)
2010/09/04 PHP
php foreach 参数强制类型转换的问题
2010/12/10 PHP
基于php-fpm的配置详解
2013/06/03 PHP
PHP快速生成各种信息提示框的方法
2016/02/03 PHP
php实现页面纯静态的实例代码
2017/06/21 PHP
phpStudy 2016 使用教程详解(支持PHP7)
2017/10/18 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
一些技巧性实用js代码小结
2009/10/14 Javascript
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
初始Nodejs
2014/11/08 NodeJs
JavaScript重载函数实例剖析
2016/05/13 Javascript
jQuery滚动新闻实现代码
2016/06/26 Javascript
详解webpack 多页面/入口支持&公共组件单独打包
2017/06/29 Javascript
bootstrap Table服务端处理分页(后台是.net)
2017/10/19 Javascript
原生JS实现 MUI导航栏透明渐变效果
2017/11/07 Javascript
vue代码分割的实现(codesplit)
2018/11/13 Javascript
JS使用正则表达式实现常用的表单验证功能分析
2020/04/30 Javascript
Python导入oracle数据的方法
2015/07/10 Python
用Eclipse写python程序
2018/02/10 Python
python抓取网站的图片并下载到本地的方法
2018/05/22 Python
Django实现支付宝付款和微信支付的示例代码
2018/07/25 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
tensorflow estimator 使用hook实现finetune方式
2020/01/21 Python
Python使用socketServer包搭建简易服务器过程详解
2020/06/12 Python
Python3.9.0 a1安装pygame出错解决全过程(小结)
2021/02/02 Python
Python中生成ndarray实例讲解
2021/02/22 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
英国综合网上购物商城:The Hut
2018/07/03 全球购物
serialVersionUID具有什么样的特征
2014/02/20 面试题
MVC的各个部分都有那些技术来实现?如何实现?
2016/04/21 面试题
大学生作弊检讨书
2014/02/19 职场文书
2016年暑期教师培训心得体会
2016/01/09 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
Nginx防盗链与服务优化配置的全过程
2022/01/18 Servers