关于vue中如何清除定时器的方法
一、问题
1、在vue中使用setTimeout定时器的时候，可能会遇到关不掉的情况，会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了，但是有时候没生效，定时器还会继续执行。
2、在这里需要说一下setTimeout的使用场景：
（1）需要执行一次定时的时候用得到，比如需要在多久之后执行的一次操作
（2）接口需要定时查询，并且需要在接口返回数据后再查询的情况下（接口定时查询的时候，该方式会经常用得到）
二、问题出现的原因
场景：目前有个接口方法，执行该方法需要5s执行完成，并且还需要在执行完后定时查询数据
问题原因分析：
（1）问题发生的场景
a. 该方法需要5s执行完，但是当执行到该方法中第2s的时候，切换页面的时候将该组件销毁了
b. 销毁了该组件，但是该方法还是会在缓存中执行往下执行，并不会因为组件销毁而停止执行后面的代码，所以后面的定时器还是会执行到，并且后续的定时器也会一直执行
c. 因为一直在缓存中执行，并且组件已经销毁了，所以定时器就会存在清不掉的情况
（2）这种情况是偶发性的，很少有需要执行5s的方法，为了将该问题复现测试，我测试的时候是自己模拟了一下这个场景，所以使用的是5s；大部分的情况可能是几十毫秒或者几百毫秒就可以执行完成了，但是在销毁的时候，恰好处于方法执行的过程中，就会导致定时器清不掉的情况
三、问题解决思路
1、解决的思路跟我之前写的关于定时器的使用及页面切换时定时器无法清除的问题解决办法这篇文章差不多，是基于该文章的思路的一个补充，可以一起参考下
2、在使用定时器的组件中，使用一个curPageUrl来记录当前使用组件的页面所在的路由地址
该参数是用于对比路由跳转的情况，如果该参数和当前访问的路由地址不一致，那么就能判断出使用定时器的组件已经销毁了，不需要再继续执行了
3、在created或mounted中为curPageUrl赋初始值
this.curPageUrl = this.$route.path;
4、在使用定时器的方法中判断是否往下执行
if (this.curPageUrl && this.curPageUrl != this.$route.path) {return false;
}
5、在beforeDestroy和destroyed中为curPageUrl赋一个永远不能出现的一个值，并且清除定时器
this.curPageUrl = "end";
this.realtimeLoadPointDataTimer && clearTimeout(this.realtimeLoadPointDataTimer);
四、实现的源代码
export default {data() {return {curPageUrl: "", // 当前页面的路由地址};},watch: {},created() {this.query();this.curPageUrl = this.$route.path;},mounted() {},beforeDestroy() {this.curPageUrl = "end";this.realtimeLoadPointDataTimer &&clearTimeout(this.realtimeLoadPointDataTimer);},destroyed() {this.realtimeLoadPointDataTimer &&clearTimeout(this.realtimeLoadPointDataTimer);},methods: {/** 查询数据 */query() {this.realtimeLoadPointDataTimer &&clearTimeout(this.realtimeLoadPointDataTimer);if (this.curPageUrl && this.curPageUrl != this.$route.path) {return false;}// 设置延迟5秒执行回调函数setTimeout(() => {if (this.checked == true) {// 设置500毫秒执行一次this.realtimeLoadPointDataTimer = setTimeout(() => {this.query();}, 500);}}, 5000);},},
};
五、总结
在开发过程中，定时器是会经常用得到的，这种情况发生的机率很小，但并不是不会发生，为了避免该情况发生，这一个解决方案可能并不是很完美，但是能够解决这类问题
如果有更好的解决方案，或者使用该解决方案解决类似问题的遇到了问题，欢迎即使交流!!!
关于vue中如何清除定时器的方法相关推荐
- vue中clearInterval()清除定时器报timeout.close is not a function错误？
在vue中实现播放音乐时旋转光碟的功能时候使用到了定时器,在暂停播放音乐的时候清除定时器,但是发现报了一个奇怪的错误: 在网上查了一下,发现报错的原因好像是vue中有自己内置的clearInterva ...
- 时间对象、定时器、清除定时器的方法
文章目录 一.时间对象 1.1[作用]:Date 对象用于处理日期和时间. 1.2[创建时间对象]: new Date()获取系统当前时间 1.3 时间对象相关属性和方法 二.2.案例:钟表 三.定时 ...
- created写法_在vue中created、mounted等方法使用小结
created:html加载完成之前,执行.执行顺序:父组件-子组件 mounted:html加载完成后执行.执行顺序:子组件-父组件 methods:事件方法执行 watch:watch是去监听一个 ...
- 在vue中methods互相调用的方法
在vue中methods互相调用的方法 转载于:https://www.cnblogs.com/macT/p/10212878.html
- vue中DPlayer视频播放器使用方法
vue中DPlayer视频播放器使用方法 1通过npm下载 npm install dplayer - s 2在需要使用的组件中导入 import Dplayer from 'Dplayer' 3页面 ...
- vue中实现打印功能的方法与注意事项
vue中实现打印功能的方法与注意事项 一.使用方法: 1. 在HTML中 2. 在VUE项目中 二.问题总结 1. 设置打印方向 2. 设置打印高度 1. 单张打印 2. 循环打印 3. 获取打印操作 ...
- Vue中v-bind=“$attrs”的使用方法
$attrs 主要用于组件之间的隔代传值.例如有 父组件A,子组件B,孙组件C 三个组件. 在A组件中传值给C,可直接在B中的C上设置v-bind="$attrs",然后在C组件中 ...
- FullCalendar拖拽日历在vue中单个页面的使用方法
FullCalendar拖拽日历在vue中单个页面的使用方法 1.首先通过npm下载插 npm install --save @fullcalendar/vue @fullcalendar/daygr ...
- 清除定时器 和 vue 中遇到的定时器setTimeout setInterval问题
2019-03更新 找到了更简单的方法,以setinterval为例,各位自行参考 mounted() {const that = thisconst timer = setInterval(func ...
最新文章
- 【硬核干货 | 程序的编译、链接、装载与运行】
- 创建android程序时 默认使用布局是,《Android移动应用基础教程》中国铁道出版社课后习题(附答案)...
- oracle拆分分区语法详解大全_Oracle hash的分区方法详解
- Introducing the ClearGLASS App on ClearOS
- loj#2002. 「SDOI2017」序列计数(dp 矩阵乘法)
- Quartus13.1全编译出现引脚错误（神级bug）
- 商务部回应中兴被罚：坚决反对美国用国内法制裁中企
- charles抓包工具的使用：手机抓包设置和安装证书
- 全网最全sql入门经典
- Linux CentOS 7安装Oracle11g超完美教程
- H3C IRF2的三种配置情况「转载」
- Golang深拷贝浅拷贝
- SiriKit测试全攻略
- 一、高并发秒杀API简介与业务分析
- python开发板卡驱动开发_树莓派开发板如何驱动LED灯
- 《Rough set-based feature selection for weakly labeled data》
- 使用双重while循环求百钱百鸡问题
- 如何在Hi3559A上运行自己的YOLOv3模型
- amazeUI 地区选择器三级联动，带地区数据
- lua和php那个好,phpor