VUE3跳转页面时 定时器未清除解决

一,问题

1、在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继续执行。
2、在这里需要说一下setTimeout的使用场景:
(1)需要执行一次定时的时候用得到,比如需要在多久之后执行的一次操作
(2)接口需要定时查询,并且需要在接口返回数据后再查询的情况下(接口定时查询的时候,该方式会经常用得到)
二、问题出现的原因
场景:目前有个接口方法,执行该方法需要5s执行完成,并且还需要在执行完后定时查询数据
问题原因分析:
(1)问题发生的场景

a. 该方法需要5s执行完,但是当执行到该方法中第2s的时候,切换页面的时候将该组件销毁了


b. 销毁了该组件,但是该方法还是会在缓存中执行往下执行,并不会因为组件销毁而停止执行后面的代码,所以后面的定时器还是会执行到,并且后续的定时器也会一直执行


c. 因为一直在缓存中执行,并且组件已经销毁了,所以定时器就会存在清不掉的情况
(2)这种情况是偶发性的,很少有需要执行5s的方法,为了将该问题复现测试,我测试的时候是自己模拟了一下这个场景,所以使用的是5s;大部分的情况可能是几十毫秒或者几百毫秒就可以执行完成了,但是在销毁的时候,恰好处于方法执行的过程中,就会导致定时器清不掉的情况

重要就是在切换页面时 定时器并未清除掉(已经在VUE2,beforeDestroy,destroyed  , VUE3 onBeforeUnmount,onUnmounted  中设置清除定时器方法但未生效)

解决方法 

使用 路由 导航守卫 监听页面跳转时清除

VUE2  (无需引入 直接书写)

  // destroyed() {//   clearInterval(this.timer);  // 清除定时器// },  之前是这么写的// 将 destroyed() 改为 beforeRouteLeave()beforeRouteLeave(to, from, next) {if (this.timer) {clearInterval(this.timer);this.timer = null;this.$refs.mychild.headerClearTimeFn();}//注意一定要next()让其跳转!!!next()}

VUE3  需要引入

import { onBeforeRouteLeave } from 'vue-router'onBeforeRouteLeave((to, from, next) => {//清除定时器// ......next()
})

 

onBeforeRouteLeave(离开当前页面路由时触,return false则阻止跳转)onBeforeRouteUpdate(路由更新时触发)

vue-router提供的两个composition api,它们只能被用于setup中。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/596959.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

软件体系结构与风格复习一

总结了软件体系结构风格的经典部分。 从软件架构风格的定义,到软件架构模型,到一些经典的软件架构风格。然后是敏捷开发中的软件架构,之后是软件架构风格的设计和实现,最后是软件架构风格的质量和评估。 这是整个课程的开展顺序…

YoloV8改进策略:基于频域多轴表示学习模块|全网首发|高效涨点|代码注释详解

摘要 涨点效果:在我自己的数据集上,改进一的mAP50 由0.986涨到了0.99,mAP50-95由0.737涨到0.749,涨点明显! 本文尝试使用频域多轴表示学习模块改进YoloV8,尝试了4种改进方式,均有不同的涨点。 论文:《医学图像分割中的频域多轴表示学习》 https://arxiv.org/pdf/231…

新能源汽车@2023/24:卷价格、拼智能与生态战

【潮汐商业评论/原创】 2023年末尾,受到大众广泛热议的小米汽车发布会“姗姗来迟”,也为“乱战”中的2023新能源汽车市场画上了一个句号。 然而,在雷军整整三个小时看似平和的演讲与技术讲解中,实则在电机、智驾、智舱等核心技术…

正则表达式速查

正则表达式速查 1、正则表达式2、常用正则表达式速查手册 1、正则表达式 正则表达式是一种强大的文本匹配工具,可以用于在文本中查找特定的模式 正则表达式由不同类型的字符组成,包括普通字符、元字符、分隔符和转义字符等。其中: 普通字符&…

java基础之java8新特性-默认方法

目录 1.默认方法 jdk8之前的接口 jdk8的接口 默认方法的用途 1.默认方法 jdk8之前的接口 在jdk8之前接口(interface)中可以定义变量和方法,变量必须是public,static,final的;方法必须是public&#xf…

初识对抗生成网络(GAN)

在研究语义通信的时候,发现解码端很多都是用GAN或基于GAN来完成的。带着对GAN的好奇,对GAN进行了一个初步学习。这篇文章介绍一下和GAN相关的一些常识吧~   本文围绕以下几个内容展开:     1.什么是GAN?     2.为什么要…

独立看门狗与窗口看门狗

一、简介 STM32F10xxx内置两个看门狗,提供了更高的安全性、时间的精确性和使用的灵活性。两个看门狗设备(独立看门狗和窗口看门狗)可用来检测和解决由软件错误引起的故障;当计数器达到给定的超时值时,触发一个中断(仅适用于窗口型看门狗)或产…

buuctf-Misc 题目解答分解106-108

106.[DDCTF2018]流量分析 提示了私钥 ,无厘头,先不管了,应该是流量加密了,用wireshark 打开 看看,真个数据流量,没有http 直接找到TCP 协议的包追踪一下TCP 找到TCP 不是红色的包追踪,大量的数…

长虹智能电视ZLM60HiS机芯刷机方法及刷机固件,附进维修模式方法

适配机芯:ZLM60HiS 型号:Q1FU、D6000i、U3、D8000ID 软件强制升级方法: 1、下载后解压,找到upgrade_ZLM60HiS_MT5508_V1.00xxx_part.pkg 、chandroid_ota_ZLM60HiS_datapart.zip复制到U盘根目录(不要有任何文件夹&a…

AOP获取方法返回值

我们用Spring的AOP切面做日志收集或者记录的时候,在springboot中用Aspect注解。比如: Aspect public class AdviceTest {Before("execution(* com.abc.service.*.many*(..))")public void permissionCheck(JoinPoint point) {System.out.print…

多交朋友多条路

最近在找工作,然后有个朋友帮我推荐一个公司,很感激他,这个朋友是之前指导过他写简历认识的,然后人家也有给我讲过一些知识,最近帮我推一个公司,不免觉得,其实多交点志同道合的朋友,…

指增的超额来自于哪里,2024的乾坤九法,美股的宏观估值双杀

图片截止到:2024/1/4 上证 周四 -0.43% 市场热点分析 1. 2024元旦后国内外市场都出现了不同程度的下跌。技术面国内市场一直走在72日均线之下,而且没有形成底部,熊市还会延续。宏观方面,12月官方PMI持续向下,小企业更多…

初入职场工作应该怎么干?

上一篇文章说过了,踏入职场和同事和领导关系怎么处,接下来我说说工作怎么干。 初入职场可能对环境,人,事,工作都一脸懵逼,深怕工作干不好之类的,所以我要给你吃定心丸,让你可以驰骋…

DBA技术栈(二):MySQL 存储引擎

2.1 MySQL存储引擎概述 上个业余的图: MyISAM 存储引擎是 MySQL 默认的存储引擎,也是目前 MySQL 使用最为广泛的存储引擎之一。他的前身就是我们在 MySQL 发展历程中所提到的 ISAM,是 ISAM 的升级版本。在 MySQL最开始发行的时候是 ISAM 存…

CentOS上设置中文/英文语言环境

一、在CentOS上设置中文语言环境 1、安装中文字体支持: sudo yum install -y wqy-microhei-fonts2、设置系统默认语言为中文: sudo localectl set-locale LANGzh_CN.UTF-83、重新启动系统,以便应用语言更改: sudo reboot二、在…

解锁无限可能:深入探索Docker的奇妙世界

解锁无限可能:深入探索Docker的奇妙世界 1、Docker的简介: Docker是一个开源的容器化平台,它以轻量级和可移植的方式打包应用程序及其所有依赖项,并提供了一种标准化的部署方式。通过使用Docker,开发人员可以将应用程…

编程语言的发展趋势是什么样的?

随着计算机技术的不断发展,计算机编程语言也在不断更新和发展。 未来编程语言的发展特点趋势是更安全、人性化(可读性、可写性)、跨平台这三个方向进行发展。更加简单易学更加多样性,有更加专业面向某一领域的语言,也…

Lumeical Script------Script Prompt 中的两种输出方式

Lumeical Script------Script Prompt 中的两种输出方式 引言正文方法1方法2 引言 有时候,和众多编程语言一样,我们需要在 Script Prompt 中打印一些我们已经得到的数据,这样可以方便我们调试代码和查看代码中是否有错误。关于在 Script Prom…

ArrayList学生管理系统

文章目录 1.ArrayList集合和数组的优势对比:1.1 ArrayList类概述1.2 ArrayList类常用方法1.2.1 构造方法1.2.2 成员方法1.2.3 示例代码 1.3 ArrayList存储字符串并遍历1.3.1 案例需求1.3.2 代码实现 1.4 ArrayList存储学生对象并遍历1.4.1 案例需求1.4.2 代码实现 1…