解决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 相关文章推荐
线路分流自动跳转代码;希望对大家有用!
Dec 02 Javascript
js操作ajax返回的json的注意问题!
Feb 23 Javascript
JSONP 跨域共享信息
Aug 16 Javascript
jquery自定义类似$.ajax()的方法实现代码
Aug 13 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
KnockoutJs快速入门教程
May 16 Javascript
轻松掌握JavaScript中的Math object数学对象
May 26 Javascript
购物车前端开发(jQuery和bootstrap3)
Aug 27 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
Jul 15 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
记一次webapck4 配置文件无效的解决历程
Sep 19 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 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
虫族 Zerg 热键控制
2020/03/14 星际争霸
PHP 文件上传功能实现代码
2009/06/24 PHP
php文件上传原理与实现方法详解
2019/12/20 PHP
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
2012/06/18 Javascript
js控制input输入字符解析
2013/12/27 Javascript
Jquery中国地图热点效果-鼠标经过弹出提示层信息的简单实例
2014/02/12 Javascript
使用JavaScript链式编程实现模拟Jquery函数
2014/12/21 Javascript
JavaScript让Textarea支持tab按键的方法
2015/06/26 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
javaScript语法总结
2016/11/25 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
2017/06/26 Javascript
Webpack性能优化 DLL 用法详解
2017/08/10 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
jquery获取img的src值实例介绍
2019/01/16 jQuery
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
Python实现的彩票机选器实例
2015/06/17 Python
Win10下Python环境搭建与配置教程
2016/11/18 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
一文总结学习Python的14张思维导图
2017/10/17 Python
python、java等哪一门编程语言适合人工智能?
2017/11/13 Python
Python 从相对路径下import的方法
2018/12/04 Python
对Django中static(静态)文件详解以及{% static %}标签的使用方法
2019/07/28 Python
python中Lambda表达式详解
2019/11/20 Python
python实现将视频按帧读取到自定义目录
2019/12/10 Python
Python Pillow.Image 图像保存和参数选择方式
2020/01/09 Python
Django form表单与请求的生命周期步骤详解
2020/06/07 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
Calphalon美国官网:美国顶级锅具品牌
2020/02/05 全球购物
英文版网络工程师求职信
2013/10/28 职场文书
文体活动总结范文
2014/05/05 职场文书
师德师风的心得体会
2014/09/02 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
实习感想范文
2015/08/10 职场文书
JavaScript实现外溢动态爱心的效果的示例代码
2022/03/21 Javascript
Android基础入门之dataBinding的简单使用教程
2022/06/21 Java/Android