data(){
return{
intervalId:null,
}
},
methods:{
// 定时刷新数据函数
dataRefreh() {
// 计时器正在进行中,退出函数
if (this.intervalId != null) {
return;
}
// 计时器为空,操作
this.intervalId = setInterval(() => {
console.log("刷新" + new Date());
this.getHeaderData(); //加载数据函数
}, 500);
},
// 停止定时器
clear() {
clearInterval(this.intervalId); //清除计时器
this.intervalId = null; //设置为null
}, getHeaderData(){
//请求接口
}
},
created() {
this.dataRefreh();
},
destroyed(){
// 在页面销毁后,清除计时器
this.clear();
}

  

vue 定时器 定时刷新页面 定时请求接口的更多相关文章

  1. Angular 定时器$timeout和$interval关于定时刷新页面和发送请求的用法

    项目中有用到定时器定时刷新页面的数据,在网上查看了一些资料,整理了一下,备忘. $timeout 用法如下:$timeout(fn,[delay],[invokeApply]); fn:一个将被延迟执 ...

  2. JS定时刷新页面及跳转页面

    JS定时刷新页面及跳转页面 Javascript 返回上一页1. Javascript 返回上一页 history.go(-1), 返回两个页面: history.go(-2); 2. history ...

  3. JSP简单练习-定时刷新页面

    <%@ page contentType="text/html; charset=gb2312" %> <%@ page import="java.ut ...

  4. Vue使用定时器定时刷新页面

    1. 需求说明 在前端开发中,往往会遇到页面需要实时刷新数据的情况,给用户最新的数据展示. 2. 逻辑分析 如果需要数据实时更新,我们自然是需要使用定时器,不断的调用接口数据,会相对的消耗内存. 3. ...

  5. 【jQuery】: 定时刷新页面

    <%@page import="qflag.ucstar.seatmonitor.manager.SeatMonitorManager"%><%@ page la ...

  6. 定时刷新页面SetInterval 和setTimeout -时间间隔可以动态设定

    JS里设定延时: 使用SetInterval和设定延时函数setTimeout 很类似.setTimeout 运用在延迟一段时间,再进行某项操作. setTimeout("function& ...

  7. js定时刷新页面.

    //页面定时刷新.2017.09.27 $(document).ready(function () { self.setInterval(function () { var d = new Date( ...

  8. http-equiv="Refresh" 实现定时刷新页面

    ***.html自动跳转文件代码如下: <HTML> <HEAD><META http-equiv="Refresh" content="5 ...

  9. vue 后退不刷新页面

    使用 this.$router.push({path: '/aichat'})路由跳转方式跳转页面 要实现 home => chat  chat页面刷新: chat => report, ...

  10. vue中如何刷新页面

    vue中刷新页面的方法 1. 不能使用 this.$router.go(0) 或者 window.reload() 不起作用还特别恶心 这个才是有效果的刷新页面,只要照图敲,就能有效果 我们在 app ...

随机推荐

  1. LeetCode算法训练 93.复原IP地址 78.子集 90.子集II

    欢迎关注个人公众号:爱喝可可牛奶 LeetCode算法训练 93.复原IP地址 78.子集 90.子集II LeetCode 93. 复原 IP 地址 分析 字符串全部由数字组成,ipv4每一段数字不 ...

  2. Verilog设计指定寄存器数组在综合时使用block memory资源

    自己用verilog代码写的rom或ram会被综合成查找表LUT+REG构建,并没有使用到block memory资源. 资料:https://www.intel.com/content/www/us ...

  3. Windows 远程桌面连接ip查询

    导航到:应用程序和服务日志 > Microsoft > Windows > TerminalServices- RemoteConnectionManager,右键单击"O ...

  4. Ubuntu命令安装默认支持的Qt5版本

    1.前置依赖 sudo apt install build-essential sudo apt install cmake 2.只安装默认的Qt模块 # 安装默认SDK # Ubuntu18.04中 ...

  5. 100、 FilenameUtils

    FilenameUtils import org.apache.commons.io.FilenameUtils; 测试数据 String fileDirectory = "/D:/aa/b ...

  6. 一个方便IO单元测试的C#扩展库

    对于我们.Net程序员,System.Web.Abstractions我们都非常熟悉,主要作用于Web可以实现单元测试,他是在.Net framework 3.5 sp1开始引入的,很好的解决项目表示 ...

  7. C++ MFC学习 (二)

    使用向导创建MFC程序 1. 新建-> 选择 MFC -> MFC应用程序 ->下一步 2. 应用程序类型选择     选择单个文档,MFC标准  -> 下一步   3. 下一 ...

  8. mysql修改密码遇到的问题

    在docker上安装了 mysql 容器,mysql镜像是8.0+版本 修改密码语句: 只针对本机生效 alter user "root"@'localhost' identifi ...

  9. pychars的使用

    1|0安装 pyecharts 兼容 Python2 和 Python3.目前版本为 0.1.2 pip install pyecharts 2|0入门 首先开始来绘制你的第一个图表 from pye ...

  10. leecode75. 颜色分类

    75. 颜色分类 给定一个包含红色.白色和蓝色.共 n 个元素的数组 nums ,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 我们使用整数 0. 1 和 2 分别表示 ...