解决vue定时器清除无效问题

news/2024/11/14 3:07:31/

清除无效原因:
当前页面 (假设当前页面为page1) 的定时器是在一系列前置请求之后,才触发的。【此定时器前面有一堆请求,等这堆请求完成之后,定时器才会被触发】
路由切换过快的时候,切换到了其他页面(page2,page3…)时,当前页面(page1)的beforeDestroy函数已经触发了,但是当前页面(page1)的定时器还没有触发。当切换到其他页面(page2,page3…)的时候,当前页面(page1)的定时器才执行。
此种情况下,定时器无法清除

解决方案:重点在于fetchingData1变量,当true时候,才去调用接口;当离开当前页面时候,需要清除定时器,那就将fetchingData1设置为false,就会阻断获取。

data() {return {timer1: null, // 定时器fetchingData1: true, // 控制是否获取数据的标志位}
},beforeRouteLeave(to, from, next) {clearInterval(this.timer1) // 清除定时器this.fetchingData1 = false; // 停止获取数据this.timer1 = null},
methods: {// 带宽(MB/s) - 2s定时器geCurrentCapacity(num) {this.fetchingData1 = true; // 开始获取数据const that = this;// 调用接口that.getChartData(num);// 接下来轮询this.timer1 = setInterval(function() {if (that.fetchingData1) { // 检查是否应该继续获取数据that.getChartData(num);}}, 2000);},
}

http://www.ppmy.cn/news/1430089.html

相关文章

yolov7模型输出层预测方法解读

本文从代码的角度分析模型训练阶段输出层的预测包括以下几个方面: 标注数据(下文统称targets)的正样本分配策略,代码实现位于find_3_positive。候选框的生成,会介绍输出层的预测值、GT、grid、 anchor之间的联系损失函…

学习笔记:Vue3(图片明天处理)

文章目录 1.概述1.1定义1.2特性1.3组合式API 2.基本用例-项目搭建3.项目目录介绍3.1概述3.2查看文件 4.组合式API4.1概述4.2新的API风格4.2.1概述4.2.2写法4.2.3基本用例-Setup选项使用4.2.4基本用例-语法糖写法(重点)4.2.5执行时机4.2.6代码特点 4.3响应…

vue3 组件传参

父子 props、$panrent 子父 emit自定义事件 $children $refs 兄弟 eventbus中央事件总线 vue3如果需要实现eventbus 安装第三方库mitt 跨层级 provider inject 组件状态共享工具: vuex piniavue3 兄弟组件传参 原理: 通过第三个“东西”,一个往里…

36-4 PHP 代码审计基础

一、 代码审计思路 1. 正向查找: 在进行正向查找时,通常按照以下步骤进行: 功能点了解: 首先,了解网站的功能点和业务逻辑,明确可能存在的漏洞类型。 入口文件检查: 查看网站的入口文件,通常是 index.php,逐行分析其代码,关注可能存在漏洞的代码段。 逐行审查: 对…

C++进修——C++基础入门

初识C 书写HelloWorld #include <iostream> using namespace std;int main() {cout << "HelloWorldd" << endl;system("pause");return 0; }注释 作用&#xff1a;在代码中加一些说明和解释&#xff0c;方便自己或其他程序员阅读代码…

Git TortoiseGit 详细安装使用教程

前言 Git 是一个免费的开源分布式版本控制系统&#xff0c;是用来保存工程源代码历史状态的命令行工具&#xff0c;旨在处理从小型到非常大型的项目&#xff0c;速度快、效率高。《请查阅Git详细说明》。TortoiseGit 是 Git 的 Windows Shell 界面工具&#xff0c;基于 Tortoi…

JVM复习总结2024.4.18(很重要)

一、JVM类加载机制 类加载机制是指我们将类的字节码文件所包含的数据读入内存&#xff0c;同时我们会生成数据的访问入口的一种特殊机制。类加载的最终产品是数据访问入口。 类加载机制的流程是什么&#xff1f;类加载器作用&#xff1a;①加载类&#xff1b;②确定类在Java虚…

大一考核题解

在本篇中&#xff0c;将尽力使用多种解法&#xff0c;来达到一题多练的效果。 1&#xff1a; 1.原题链接&#xff1a; 238. 除自身以外数组的乘积 - 力扣&#xff08;LeetCode&#xff09; 这道题首先一眼肯定想到拿整体的积除以当前元素&#xff0c;将结果作为ans&#xff0c;…