解决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 DOM操作小结与实例
Jan 07 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
Javascript控制页面链接在新窗口打开具体方法
Aug 16 Javascript
浅析tr的隐藏和显示问题
Mar 05 Javascript
深入理解JS addLoadEvent函数
May 20 Javascript
使用vue编写一个点击数字计时小游戏
Aug 31 Javascript
详解vue-router 2.0 常用基础知识点之router-link
May 10 Javascript
vue 全选与反选的实现方法(无Bug 新手看过来)
Feb 09 Javascript
JavaScript常用数学函数用法示例
May 14 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
vue 递归组件的简单使用示例
Jan 14 Vue.js
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作的文本留言本的例子(一)
2006/10/09 PHP
PHP中str_replace函数使用小结
2008/10/11 PHP
php 页面执行时间计算代码
2008/12/04 PHP
php+iframe实现隐藏无刷新上传文件
2012/02/10 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
php实现的pdo公共类定义与用法示例
2017/07/19 PHP
Laravel 5.5基于内置的Auth模块实现前后台登陆详解
2017/12/21 PHP
基于jquery的修改当前TAB显示标题的代码
2010/12/11 Javascript
循环 vs 递归浅谈
2013/02/28 Javascript
JavaScript数字和字符串转换示例
2014/03/26 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
完美解决浏览器跨域的几种方法(汇总)
2017/05/08 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
JavaScript 高性能数组去重的方法
2018/09/20 Javascript
微信小程序自定义可滑动日历界面
2018/12/28 Javascript
vue-cli项目使用mock数据的方法(借助express)
2019/04/15 Javascript
js 闭包深入理解与实例分析
2020/03/19 Javascript
基于redis的小程序登录实现方法流程分析
2020/05/25 Javascript
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python基于pygame模块播放MP3的方法示例
2017/09/30 Python
python爬虫之urllib库常用方法用法总结大全
2018/11/14 Python
Python使用Selenium爬取淘宝异步加载的数据方法
2018/12/17 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
使用python模拟命令行终端的示例
2019/08/13 Python
python实现批量处理将图片粘贴到另一张图片上并保存
2019/12/12 Python
pycharm 设置项目的根目录教程
2020/02/12 Python
python模拟点击玩游戏的实例讲解
2020/11/26 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
XML文档面试题
2015/08/05 面试题
党的群众路线教育实践活动剖析材料
2014/09/30 职场文书
2015年中秋寄语
2015/07/31 职场文书
图书馆义工感想
2015/08/07 职场文书
python入门之算法学习
2021/04/22 Python
实现AJAX异步调用和局部刷新的基本步骤
2022/03/17 Javascript