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

news2024/7/6 17:43:45

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.coloradmin.cn/o/1831346.html

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

相关文章

深度学习网络结构之---Inception

目录 一、Inception名称的由来 二、Inception结构 三、Inception v2 四、Inception v3 1、深度网络的通用设计原则 2.卷积分解(Factorizing Convolutions) 3.对称卷积分解 3.非对称卷积分解 五、Inception v4 一、Inception名称的由来 Inception网…

Python MongoDB 基本操作

本文内容主要为使用Python 对Mongodb数据库的一些基本操作整理。 目录 安装类库 操作实例 引用类库 连接服务器 连接数据库 添加文档 添加单条 批量添加 查询文档 查询所有文档 查询部分文档 使用id查询 统计查询 排序 分页查询 更新文档 update_one方法 upd…

Spring IoC【控制反转】DI【依赖注入】

文章目录 控制反转(IoC)依赖注入(DI)IoC原理及解耦IoC 容器的两种实现BeanFactoryApplicationContext IoC 是 Inversion of Control 的简写,译为“控制反转”,它不是一门技术,而是一种设计思想&…

碉堡了!云原生大佬撰写的K8s学习指南,有点炸裂,建议运维都收藏!

在这个数字化转型的时代,容器化和云原生技术已成为软件开发的重要趋势。【Kubernetes】作为云原生领域的旗舰项目,不仅是一种容器编排工具,更是构建现代、弹性和可扩展应用程序的基础平台。 因此,对于运维人员来说,学…

裁剪图片的最简单方法?这四种裁剪方法真的超级简单!

裁剪图片的最简单方法?在丰富多彩的现代生活中,图片成为了我们表达、沟通甚至展示身份的重要媒介,然而,无论是出于个人审美还是专业需求,图片的格式和尺寸往往成为了我们不得不面对的问题,特别是那些未经雕…

Spring IOC 控制反转(注解版)

Spring IOC 控制反转 文章目录 Spring IOC 控制反转一、前言什么是控制反转(IOC)什么是依赖注入(DI) 二、介绍 IOC2.1 传统思想代码2.2 解决方案2.3 IOC思想代码2.4 IOC 使用(Autowired依赖注入)2.5 IOC 优…

一五三、MAC 安装MongoDB可视化工具连接

若没有安装brew包管理工具,在命令行输入安装命令 /bin/bash -c “$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)”上面步骤安装完成后,开始安装MongoDB,输入安装命令: brew tap mongodb/brewbrew u…

LogicFlow 学习笔记——8. LogicFlow 基础 事件 Event

事件 Event 当我们使用鼠标或其他方式与画布交互时,会触发对应的事件。通过监听这些事件,可以获取其在触发时所产生的数据,根据这些数据来实现需要的功能。详细可监听事件见事件API。 监听事件 lf实例上提供on方法支持监听事件。 lf.on(&…

本地数据如何正确的导入SOLIDWORKS PDM系统

SOLIDWORKS 产品数据管理 (PDM) 解决方案可帮助您控制设计数据,并且从本质上改进您的团队就产品开发进行管理和协作的方式。使用 SOLIDWORKS PDM Professional,您的团队能够:1. 安全地存储和索引设计数据以实现快速检索;2. 打消关…

一键掌控,4G红外插座引领智能生活新潮流!

随着科技的进步,市场上出现大量带语音、手机APP可控制的智能插座产品,由此可看出客户对产品的功能要求也越来越高,追求舒适的体验感,特别是对操控性的要求越来越高。但是目前大部分红外遥控插座均为WiFi插座类型,WiFi红…

osi七层网络模型安全加固

应用层加固 应用层的攻击: 1、针对应用层协议的攻击:HTTP攻击、DNS攻击、电子邮件攻击等,利用应用层协议的漏洞,构造恶意数据包,是目标服务器执行恶意代码或暴露敏感信息 HTTP攻击:XSS、CSRF、HTTP头注入…

MySQL之高级特性(五)

高级特性 查询缓存 如何配置和维护查询缓存 一旦理解查询缓存工作的原理,配置起来就很容了。它也只有少数的参数可供配置。如下所示: 1.query_cache_type 是否打开查询缓存。可以设置成OFF、ON或DEMAND。DEMAND表示只有在查询语句中明确写明SQL_CACHE的语句才放…

Excel 常用技巧(五)

Microsoft Excel 是微软为 Windows、macOS、Android 和 iOS 开发的电子表格软件,可以用来制作电子表格、完成许多复杂的数据运算,进行数据的分析和预测,并且具有强大的制作图表的功能。由于 Excel 具有十分友好的人机界面和强大的计算功能&am…

解锁呼叫中心运营的无限潜能 - 信必优数字化解决方案

在当今瞬息万变的商业环境中,呼叫中心已不仅仅是一个简单的客户服务渠道。它是企业与客户建立联系、提供卓越体验的关键纽带。然而,传统的呼叫中心运营模式已无法满足日益增长的客户期望和业务需求。这就需要一种全新的解决方案来推动呼叫中心的数字化转型,释放其无限潜能。 信…

QListWidget 插入 item,item显示自定义界面

代码示意: class ItemWidget_action_cfg_w(QWidget):... # 如下方法是在指定item下插入新的item def __do_add_item(self, item):# 获取当前item rowrow self.__list_w.indexFromItem(item).row()# 注意这里没有父类,解释见后面说明new_item QList…

C++类对象模型、类对象的存储方式、this指针、this指针的引出、this指针的特性、C语言和C++实现Stack的对比等的介绍。

文章目录 前言一、C类对象模型1. 类对象的存储方式2. 结构体内存对齐规则 二、this指针1. this指针的引出2. this指针的特性3. C语言和C实现Stack的对比 总结 前言 C类对象模型、类对象的存储方式、this指针、this指针的引出、this指针的特性、C语言和C实现Stack的对比等的介绍…

如何在招聘中开始使用AI?

在人工智能时代,招聘团队面临着“用更少的钱做更多的事情”的压力:用更少的钱和更少的团队。根据一项调查,58%的受访者认为,“提高我们助教团队的效率,降低成本”是明年招聘职位的首要任务。在招聘中使用人工智能是提高…

Excel 如何复制单元格而不换行

1. 打开excle, sheet1右键单击>查看代码>插入>模块 输入代码 Sub CopyText() Updated by NirmalDim xAutoWrapper As ObjectSet xAutoWrapper New DataObject or GetObject("New:{1C3B4210-F441-11CE-B9EA-00AA006B1A69}")xAutoWrapper.SetText ActiveC…

东理咨询交流论坛系统

开头语:你好呀,我是计算机学长猫哥!如果有相关需求,文末可以找到我的联系方式。 开发语言:Java 数据库:MySQL 技术:JSP技术、B/S架构 工具:MyEclipse 系统展示 首页 管理员功能…

如何利用TikTok矩阵源码实现自动定时发布和高效多账号管理

在如今社交媒体的盛行下,TikTok已成为全球范围内最受欢迎的短视频平台之一。对于那些希望提高效率的内容创作者而言,手动发布和管理多个TikTok账号可能会是一项繁琐且耗时的任务。幸运的是,通过利用TikTok矩阵源码,我们可以实现自…