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使用定时器定时刷新页面的更多相关文章

  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. 【jQuery】: 定时刷新页面

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

  5. js定时刷新页面.

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

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

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

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

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

  8. vue路由history模式刷新页面出现404问题

    vue hash模式下,URL中存在'#',用'history'模式就能解决这个问题.但是history模式会出现刷新页面后,页面出现404.解决的办法是用nginx配置一下.在nginx的配置文件中 ...

  9. 新来的前端小姐姐问:Vue路由history模式刷新页面出现404问题

    摘要:vue-router 默认 hash 模式 -- 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载. 本文分享自华为云社区<学习Vue Rou ...

随机推荐

  1. mybatis读写分离

    mybatis读写分离实现方式有很多种,当然如果没有太过复杂的处理,可以使用阿里云数据库自带的读写分离连接,那样会更加简洁.本文主要对mybatis实现读写分离.主要的实现方式有一下四种: 方案1 通 ...

  2. 谈谈我对 Flutter 未来发展 和 “嵌套地狱” 的浅显看法

    Flutter 未来发展 提到 Flutter 就不得不提到 Fuchsia 系统,这是一个尚未正式发布的操作的系统,引用 Android 和 Chrome 的高级副总裁 Hiroshi Lockhe ...

  3. pick靶场-sql注入

    甲.数字型注入 数字型注入一般提交值没有引号,所以直接在后面构造语句就可以了. 抓包查看 构造语句 提交后 该数据库表内容被爆出来了. 乙.字符型注入 首先我们要知道一点,字符串在数据库中提交是需要用 ...

  4. ES6 promise用法总结

    一   什么时候promise? promise是异步编程的一个解决方案,是一个构造函数,身上带着all,resolve,reject,原型上有cath,then等方法 promise有两个特点: 1 ...

  5. mackdown基础语法

    目录 前言 二.Markdown基本语法 前言 由于有些语法无法在博客园展示,推荐使用Typora解锁全套,下载地址:https://www.typora.io/ Markdown是一种可以使用普通文 ...

  6. STL标准函数库学习小总结

    浅谈STL(未完)前言:(1)学习资料——<算法笔记>第六章.<常用基础数据结构>文档 (2)测试平台——Codeup新家(<算法笔记>对应OJ).洛谷.YCOJ ...

  7. 使用selenium抓取淘宝信息并存储mongodb

    selenium模块 简单小例子 Author:song import pyquery from selenium import webdriver from selenium.common.exce ...

  8. BZOJ3573 米特运输 题解

    题目 米特是D星球上一种非常神秘的物质,蕴含着巨大的能量.在以米特为主要能源的D星上,这种米特能源的运输和储存一直是一个大问题.D星上有N个城市,我们将其顺序编号为1到N,1号城市为首都.这N个城市由 ...

  9. java学习第二天 20207/7

    一. 1.对传参进行了了解 2. 2.java的变量命名与c/c++有些不同在java中有¥,字母,下划线和数字,同样不可以是数字开头. java的布尔型为boolean 各个数据类型的信息: 注意: ...

  10. jvm之栈、堆

    1. Java Virtual Machine ​ 人群当中,一位叫java的小伙子正向周围一众人群细数着自己取得的荣耀与辉煌.就在此时,c老头和c++老头缓步走来,看着被众人围住的java,c老头感 ...