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. AcWing 141 周期

    题目:https://www.acwing.com/problem/content/143/ 一个字符串的前缀是从第一个字符开始的连续若干个字符,例如"abaab"共有5个前缀,分 ...

  2. 代码随想录算法训练营day18 | leetcode 513.找树左下角的值 ● 112. 路径总和 113.路径总和ii ● 106.从中序与后序遍历序列构造二叉树

    LeetCode 513.找树左下角的值 分析1.0 二叉树的 最底层 最左边 节点的值,层序遍历获取最后一层首个节点值,记录每一层的首个节点,当没有下一层时,返回这个节点 class Solutio ...

  3. IP 地址分类及子网划分

    IP 地址分类 在现实生活中,一个市区有许多的区,区下面又有很多的街道,街道下面又有很多的小区,A 市区.B 市区就是一个范围,每一个范围都有不同的居民数量.类比到计算机网络,A 类地址可以容纳256 ...

  4. 【Java-01-3】java基础-基本语法(3)(数组,多维数组)

    import java.io.*; public class _07_Array { public static void main(String[] args) { // 1 定义数组 System ...

  5. elasticsearch-8.6.1集群安装部署

    elk官方下载地址:https://www.elastic.co/cn/downloads/ 1.创建普通用户及用户组 groupadd elasticsearch useradd elasticse ...

  6. Android Studio连接SQLlite

    1. MainActivity.java package com.example.dbproject;import android.database.sqlite.SQLiteDatabase;imp ...

  7. 野火FreeRTOS计数信号量实验意外处理

    编译的时候,一直说xSemaphoreCreateCounting这个函数没有定义. 最后发现,是FreeRTOSConfig.h文件中,没有将使能计数信号量的宏打开. 解决办法:在FreeRTOSC ...

  8. SVN的安装和使用手册2

    转载:http://www.cnblogs.com/armyfai/p/3985660.html SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生成很多不同的版本,这就需 ...

  9. VMware-共享文件夹挂载

    [root@localhost jiangyinuo]# cd /cdromobash: cd: /cdromo: 没有那个文件或目录[root@localhost jiangyinuo]# cd / ...

  10. .net5的安装部署条件

    1.安装vs2019最新版本 2.安装 .net5最新版本的的Hosting Bundle 下载地址:https://dotnet.microsoft.com/download/dotnet/5.0 ...