Vue使用定时器定时刷新页面
1. 需求说明
在前端开发中,往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示。
2. 逻辑分析
如果需要数据实时更新,我们自然是需要使用定时器,不断的调用接口数据,会相对的消耗内存。
3. 代码示例
data(){
return {
intervalId:null
}
},
methods:{
// 定时刷新数据函数
dataRefreh() {
// 计时器正在进行中,退出函数
if (this.intervalId != null) {
return;
}
// 计时器为空,操作
this.intervalId = setInterval(() => {
console.log("刷新" + new Date());
this.initData(); //加载数据函数
}, 5000);
},
// 停止定时器
clear() {
clearInterval(this.intervalId); //清除计时器
this.intervalId = null; //设置为null
},
},
created(){
this.dataRefreh();
},
destroyed(){
// 在页面销毁后,清除计时器
this.clear();
}
4. 代码分析
- 首先选择数据刷新的时机,在created中。
- 声明计时器,与数据刷新函数。
- 在页面销毁的时机(destroyed),关闭计时器等耗时操作。
本文转自:https://blog.csdn.net/qq_41115965/article/details/102722540
Vue使用定时器定时刷新页面的更多相关文章
- Angular 定时器$timeout和$interval关于定时刷新页面和发送请求的用法
项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘. $timeout 用法如下:$timeout(fn,[delay],[invokeApply]); fn:一个将被延迟执 ...
- JS定时刷新页面及跳转页面
JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...
- JSP简单练习-定时刷新页面
<%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.ut ...
- 【jQuery】: 定时刷新页面
<%@page import="qflag.ucstar.seatmonitor.manager.SeatMonitorManager"%><%@ page la ...
- js定时刷新页面.
//页面定时刷新.2017.09.27 $(document).ready(function () { self.setInterval(function () { var d = new Date( ...
- 定时刷新页面SetInterval 和setTimeout -时间间隔可以动态设定
JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...
- http-equiv="Refresh" 实现定时刷新页面
***.html自动跳转文件代码如下: <HTML> <HEAD><META http-equiv="Refresh" content="5 ...
- vue路由history模式刷新页面出现404问题
vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...
- 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题
摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...
随机推荐
- [ APUE ] 第三章 文件系统
1. 文件描述符 打开或创建一个文件时,内核向进程返回一个文件描述符,当读.写一个文件时,用open()或creat()返回的文件描述符标识该文件,将其作为参数传递给write.read. stdin ...
- 01.scrapy入门
Scrapy快速入门 Scrapy是一个为了爬取网站数据,提取结构性数据而编写的应用框架,它使用Twisted这个异步网络库来处理网络通讯,架构清晰,并且包含了各种中间件接口,可以灵活的完成各种需求. ...
- kubernetes资源均衡器Descheduler
背景 Kubernetes中的调度是将待处理的pod绑定到节点的过程,由Kubernetes的一个名为kube-scheduler的组件执行.调度程序的决定,无论是否可以或不能调度容器,都由其可配置策 ...
- 云服务器终端命令显示-bash-4.2#怎么解决
原因:删除了root/.bashrc 和 root/.bash_profile两个文件的丢失 解决办法: -bash-4.2# cp /etc/skel/.bashrc /root/ -bash-4. ...
- oracle数据库插入日期格式字符串给date类型字段
首先执行 alter session set nls_date_format='yyyy-mm-dd hh24:mi:ss'; 然后执行insert语句而无需使用to_date函数
- emacs-显示行号以及跳转到指定行
[显示行号]M+x display-line-number-mode <Return> [跳转行号]M+x goto-line 然后输入你想跳转到的行号 <Return> (在 ...
- java语言进阶(六)_线程_同步
第一章 多线程 想要设计一个程序,边打游戏边听歌,怎么设计? 要解决上述问题,需要使用多进程或者多线程来解决. 1.1 并发与并行 并发:指两个或多个事件在同一个时间段内发生. 并行:指两个或多个事件 ...
- 【学习随手记】kubeadm 查看创建集群需要的镜像版本,附拉取镜像脚本
查看创建集群需要的镜像版本 kubeadm config images list [--kubernetes-version <version>] 国内拉取镜像脚本 一般而言,直接使用ku ...
- HBase2.0 meta信息丢失的修复方法
在HBase入库日志中发现有一个表入库失败,检查HBase服务端后发现该表的meta信息丢失了: 而HDFS上的region还在: 而HBCK工具不支持HBase2.0版本,只好自己写一个修复工具.网 ...
- JS中同步和异步
首先,我们要知道,JavaScript的本质是一门浏览器脚本语言,在执行的时候是一行一行的执行,只有前面的代码执行完了才会执行后面的代码.JS是单线程语言指的就是这个意思. 同步和异步其实在进行任务执 ...