Vue项目 定时器(setInterval)实现轮询接口(定时刷新页面,重新渲染数据实时更新)

需求:

每隔1s自动刷新一下当前页面,同时发送请求,重新渲染数据,以到达实时更新。

js有两种定时器

setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次

轮询单独使用setInterval可能导致页面卡死

  • 因为setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加
  • 但是setTimeout是自带清除定时器的队列。所以可以把二者结合起来使用。
  1. setTimeout():延时任务。在指定的毫秒数后调用函数或计算表达式,
  2. setInterval():定时任务。在每隔指定的毫秒数循环调用函数或表达式,直到clearInterval把它清除。
  3. setTimeout()只执行一次,而setInterval可以多次调用。

setInterval会符合我们的业务需求,然而也需要注意一些坑,单纯的使用setInterval会导致页面卡死!其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。

但是setTimeout是自带清除定时器的,因此正确解决方法如下:

data(){return {timer:null, //定时器名称}
},
mounted(){this.getList();this.timer = setInterval(() => {setTimeout(() => {this.getList() //调用接口的方法}, 0)}, 1000)
},
methods: {getList(){//do something},
},
beforeDestroy(){clearInterval(this.timer);        this.timer = null;
}

说明:

1.在执行定时器前先执行一次获取接口数据的操作函数, 否则接口会1分钟后才调用

2.为了避免退出当前页面后,在其他页面也继续调用接口,退出前需要清除定时器.

清除定时器优化方案

上面的清除定时器方案有两点不好:

  1. 它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。
  2. 我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西

优化方案:

通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器.

const timer = setInterval(() =>{                    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {            clearInterval(timer);                                    
})

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

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

相关文章

检索增强生成(RAG)的挑战与优化措施

如何理解检索增强生成(RAG) 简单来说,RAG就是让LLM通过外部知识源获取额外信息,从而生成更准确、更符合上下文的答案,并减少错误信息(或称为“幻觉”)的产生。 我们都知道,最先进的…

C# Winform Datagridview控件使用和详解

DataGridView 是一种以表格形式显示数据的控件,由Rows(行),Columns(列),Cells(单元格)构成。本实例将综合利用DataGridView的属性和事件,展示不同的表格风格数据和操作。包含: 添加Datagridview行,列数据设…

Vector | Graph:蚂蚁首个开源Graph RAG框架设计解读

作者:范志东 检索增强生成(RAG:Retrieval Augmented Generation)技术旨在把信息检索与大模型结合,以缓解大模型推理“幻觉”的问题。近来关于RAG的研究如火如荼,支持RAG的开源框架也层出不穷,并…

【蜂窝物联】物联网智能控制器助力各种自动化控制领域科学管控

【蜂窝物联】4G远程温湿度传感器科学管理利器,应用无处不在 2024-06-17 14:09 发布于:福建省 随着信息化的不断推进,对各行各业都是一次现代化升级的契机,比如工厂的温湿度监测工作,完全可以由无线温湿度监控方案…

Unity 材质系统优化(mesh相同,图片不同,但是可以将所有的图片合成一张图集)

今天提供一个Unity材质优化的思路,流程是这样的,模型的mesh相同只是图片不同,我想着能不能将所有的图片合成一张图集呢,于是我就试着在Blender里面开搞了,所有的mesh相同的模型,共用一个材质(图…

八股文之JVM

目录 1.JVM内存划分 2.JVM类加载过程 3.JVM垃圾回收机制GC 3.1.判断谁是垃圾 3.2.如何释放对应的内存 1.JVM内存划分 在一个Java程序运行起来之后,jvm就会从操作系统中申请一块内存,然后就会将该内存划分成多个部分,用于不同的用途。 …

目标与学习方向

文章目录 一、任务最终目的二、所需技术栈1、前端开发2、后端开发3、数据库管理 三、WEB全栈开发路线1、学习HTML、CSS、JavaScript2、了解版本控制3、学习前端框架4、学习服务器端编程5、数据库6、构建RESTful API7、深入学习后端框架8、了解网络安全9、熟悉DevOps10、其他技能…

一、开发环境安装 Avalonia

1、概述 官网中是这么介绍Avalonia的,Avalonia是一个强大的框架,使开发人员能够使用.NET创建跨平台应用程序。它使用自己的渲染引擎绘制UI控件,确保在Windows、macOS、Linux、Android、iOS和WebAssembly等不同平台上具有一致的外观和行为。这…

WebSocket进行握手需要的字段

一、客户端请求必须要有的头: Upgrade: websocket Connection: Upgrade Sec-Websocket-Key: 随机生成的字符串 Sec-WebSocket-Protocol: chat Sec-WebSocket-Vesion: 13 二、服务端响应必须要有的头: Upgrade: websocket Connection: Upgrade SecWebSock…

CCAA认证人员注册全国统一考试开始报名

备受瞩目的CCAA(中国认证认可协会)认证人员注册全国统一考试即将拉开报名序幕。 考试基本信息: 1)报名网站网址:https://kaoshi.ccaa.org.cn/ 2)考试报名系统自2024年6月17日12:00时起面向考生正式开通&…

c++编程(19)——STL(5)容器适配器

欢迎来到博主的专栏——c编程 博主ID:代码小豪 文章目录 适配器adaptorstackqueuepriority_queue传送门: 适配器adaptor 适配器看起来像一个容器,实际上adaptor并不属于容器的范畴,更像是一种专门用于某种容器的接口。 常用的适…

关于渗透测试

目录 1渗透测试的目的 2渗透测试的手段 3渗透测试发现的问题分类 1渗透测试的目的 检验目的系统的安全性 2渗透测试的手段 1智能工具探测 2人工测试 3分析 3渗透测试发现的问题分类 SQL注入-高风险 垂直越权-高风险 链接注入-高风险 源码泄露-中风险 短信验证码重复利用-中风…

智能不锈钢氮气柜温湿度氧含量控制介绍

智能不锈钢氮气柜通过集成精密的温湿度和氧含量控制系统,确保内部环境稳定在适宜存储敏感物料的条件。具体实现方式如下: 温度控制:智能氮气柜通常配备有精确的温度传感器以及加热或冷却系统。当内部温度偏离设定值时,系统会自动启…

0617_QT3

练习: #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);//去掉头部this->setWindowFlag(Qt::FramelessWindowHint);//去掉空白部分this->setA…

Misc之图片隐写

前几天忙高数和c考试去了。。。Web毫无进展,学学这个放松一下 一、工具准备 这里目前使用的工具为kali上的工具和安装在电脑上的Winhex,010editor,Stegsolve 二、png图片隐写 这里我就直接用题目学习了,也是参考了csdn上大佬的…

C语言socket TCP/IP通讯Server/Client程序(Ubuntu Linux 24.04环境)

继上篇文章介绍了Ubuntu Linux 24.04 C语言TCP/IP socket编程基础知识,本文将用C语言在Ubuntu Linux 24.04环境下开发一对使用socket进行TCP/IP通讯的Server/Client程序,实现的功能是: 1. 当client连上server时,显示连接成功的信…

MYSQL 数字(Aggregate)函数

目录 1、AVG() 2、MAX() 3、MIN() 4、SUM() 5、COUNT() 6、LIMIT() 1、AVG() 解释:返回数值列(字段)的平均值。 语法格式:SELECT AVG(column_name) FROM table_name 中文注释:select AVG(数值列/字段) from 表名 ; 用法&#xff1…

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

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

【前端】Nesj 学习笔记

1、前置知识 1.1 装饰器 装饰器的类型 declare type ClassDecorator <TFunction extends Function>(target: TFunction) > TFunction | void; declare type PropertyDecorator (target: Object, propertyKey: string | symbol) > void; declare type MethodDe…

GenICam标准(三)

系列文章目录 GenICam标准&#xff08;一&#xff09; GenICam标准&#xff08;二&#xff09; GenICam标准&#xff08;三&#xff09; GenICam标准&#xff08;四&#xff09; GenICam标准&#xff08;五&#xff09; GenICam标准&#xff08;六&#xff09; 文章目录 系列文…