Vue 使用setInterval定时器导致前端页面卡死(解决方法)

Vue 使用setInterval定时器导致前端页面卡死

在这里插入图片描述

在这里插入图片描述

原因

setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。
其原因与JS引擎线程有关(需深入研究JS引擎线程) ,但是setTimeout是自带清除定时器的。

解决方案

  mounted() {this.getList();if (this.timer) {clearInterval(this.timer);} else {this.timer = setInterval(() => {setTimeout(this.getList(), 0);// console.log("刷新" + new Date());}, 10000);}this.$once("hook:beforeDestroy", () => {clearInterval(this.timer);});},

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

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

相关文章

3.4 SpringAOP之通知获取数据

1.JoinPoint和ProceedingJoinPoint接口 接口定义功能适用通知类型JoinPoint代表了在程序执行过程中的连接点获取到连接点(被拦截方法)的名称、参数、目标对象以及代理对象等信息前置、后置、返回后、抛出异常后通知ProceedingJoinPoint是 JoinPoint 接口…

CSS 变量的优势

CSS 变量(Custom Properties):灵活的样式定义与复用 在 CSS 中,我们通常会使用一些固定的值来定义样式,比如颜色、字体大小、边距等。但随着项目的不断发展和需求的变化,这些固定值可能会变得难以维护和复用。这就是 CSS 变量(Custom Properties)派上用场的地方。 …

26.ByteBuf组成和内存释放源码

ByteBuf中有什么? 1.capacity 容量 2.max capacity 最大容量 3.读指针(在ByteBuf的一开始) 4.写指针(在ByteBuf的一开始) 读指针与写指针之间就是 还未读取的部分(可读部分)。 读指针读过的部分叫做废弃的部分。 ByteBuf由四部分组成 可扩容部分(容量capacity与…

同城跑腿多合一系统源码小程序支持安卓+IOS+公众号+H5

🚀 同城跑腿多合一小程序:便捷生活新选择 💨 一、引言:走进便捷新纪元 在这个快节奏的现代生活中,时间成了最宝贵的财富。而“同城跑腿多合一小程序”正是为了满足大家对于便捷、高效生活的追求而诞生的。它不仅是一款…

提高效率的神器:IPython 使用技巧大揭秘

一、引言 IPython 是 Python 交互式计算的强大工具,深受数据科学家和开发者的喜爱。它不仅提供了一个增强的交互式 shell,还支持丰富的扩展和强大的调试功能。在这篇博客中,我们将整理一些实用的 IPython 使用技巧,帮助你更高效地…

RapidLayout:中英文版面分析推理库

引言 继上一篇文章之后,我这里想着将360发布的版面分析模型整合到现有的rapid_layout仓库中,便于大家快速使用。 不曾想到,我这整理工作越做越多了,好在整体都是往更好方向走。 起初,rapid_layout项目是在RapidStru…

vue3页面传参

一&#xff0c;用query传参 方法&#xff1a; router.push({path: ‘路由地址’, query: ‘参数’}) 例子&#xff1a;a页面携带参数跳转到b页面并且b页面拿到a页面传递过来的参数 在路由router.ts配置 a页面&#xff1a; <template><div >a页面</div>…

【可控图像生成系列论文(二)】MimicBrush 港大、阿里、蚂蚁集团合作论文解读2

【可控图像生成系列论文&#xff08;一&#xff09;】简要介绍了论文的整体流程和方法&#xff0c;本文则将就整体方法、模型结构、训练数据和纹理迁移进行详细介绍。 1.整体方法 MimicBrush 的整体框架如下图所示。为了实现模仿编辑&#xff0c;作者设计了一种具有双扩散模型…

SpingBoot快速入门下

响应HttpServietResponse 介绍 将ResponseBody 加到Controller方法/类上 作用&#xff1a;将方法返回值直接响应&#xff0c;如果返回值是 实体对象/集合&#xff0c;将会自动转JSON格式响应 RestController Controller ResponseBody; 一般响应 统一响应 在实际开发中一般…

DS1339C串行实时时钟-国产兼容RS4C1339

RS4C1339串行实时时钟是一种低功耗的时钟/日期设备&#xff0c;具有两个可编程的一天时间报警器和一个可编程方波输出。地址和数据通过2线双向总线串行传输。时钟/日期提供秒、分钟、小时、天、日期、月份和年份信息。对于少于31天的月份&#xff0c;月末的日期会自动调整&…

PDO预编译与sql注入

刚学web安全的时候学到sql注入防御&#xff0c;那些文章基本上都会说利用pdo预编译就可以近乎完美防御sql注入&#xff0c;或者看到一些渗透经验贴&#xff0c;遇到sql经过预编译的网站师傅们总是会建议赶紧换个站&#xff0c;那么预编译究竟能不能完美防御sql注入&#xff0c;…

VBA基础知识点总结

VBA教程 VBScript教程 数据类型 数字数据类型 非数字数据类型 变量&常量 可以通过Dim、Public或Private语句声明变量。 变量语法&#xff1a;Dim <<variable_name>> As <<variable_type>>&#xff08;需要在使用它们之前声明&#xff09; 常量语…

LVS+Keepalived高可用集群部署

一、高可用群集(HA)的作用 企业应用中&#xff0c;单台服务器承担应用存在单点故障的危险&#xff0c;单点故障一旦发生&#xff0c;企业服务将发生中断&#xff0c;造成极大的危害。 高可用集群是由一台主调度器和一台或多台备用调度器。在主调度器能够正常运转时&#xff0c;…

Java十六进制Dump打印数据

代码 package test;import java.io.IOException;import sun.misc.HexDumpEncoder;@SuppressWarnings("restriction")

优选算法刷题笔记 2024.6.10-24.6.20

一、双指针算法(快慢指针,对撞指针) 艹&#xff0c;CSDN吞了我是十三题笔记&#xff01;&#xff01;&#xff01; 二、滑动窗口(滑动窗口) 1、找到字符串中所有字母异位词 class Solution {public List<Integer> findAnagrams(String s, String p) {int[] hash1 new in…

【Python】一文向您详细解析内置装饰器 @lru_cache

【Python】一文向您详细解析内置装饰器 lru_cache 下滑即可查看博客内容 &#x1f308; 欢迎莅临我的个人主页 &#x1f448;这里是我静心耕耘深度学习领域、真诚分享知识与智慧的小天地&#xff01;&#x1f387; &#x1f393; 博主简介&#xff1a;985高校的普通本硕&a…

TMS320F280049学习5:CPU timer中断

TMS320F280049学习5&#xff1a;CPU timer中断 文章目录 TMS320F280049学习5&#xff1a;CPU timer中断前言一、工程代码二、CPU timer时钟总结 前言 DSP的内部有3个CPU timer&#xff0c;分别是CUP timer0 / 1 / 2&#xff0c;传说CPU timer2一般在跑系统时用&#xff0c;类似…

网络基础

自学python如何成为大佬(目录):https://blog.csdn.net/weixin_67859959/article/details/139049996?spm1001.2014.3001.5501 当今的时代是一个网络的时代&#xff0c;网络无处不在。而我们前面学习编写的程序都是单机的&#xff0c;即不能和其他电脑上的程序进行通信。为了实…

解锁Flutter中的ProcessResult:让外部命令执行变得轻松

介绍 在我们的编程世界中&#xff0c;有时候我们需要与外部系统或者命令行交互。这就像在一场迷宫中寻找出口一样&#xff0c;我们需要向迷宫的门口询问正确的道路。而在 Flutter 中&#xff0c;这个问路的过程就是通过 ProcessResult 来实现的。 为什么要使用 ProcessResult…

Python 设计模式(第2版) -- 第三部分(行为型模式)

Python 设计模式(第2版) 再介绍下行为型设计模式。 行为型模式&#xff0c;顾名思义&#xff0c;它主要关注的是对象的责任。它们用来处理对象之间的交互&#xff0c;以实现更大的功能。行为型模式建议&#xff1a;对象之间应该能够彼此交互&#xff0c;同时还应该是松散耦合…