vue实现定时刷新数据,每隔5分钟执行一次

目录
  • vue定时刷新数据,每隔5分钟执行一次
  • vue局部定时刷新
    • 设置定时器
    • 局部刷新
    • 清除定时器
  • 总结

vue定时刷新数据,每隔5分钟执行一次

data() {
  return {
    timer: null
  }
},
mounted() {
   // 每隔5分钟定时刷新
   this.timer = setInterval(() => {
     this.getFxItemlist();
   }, 300000)
 },
 beforeDestroy() {
   clearInterval(this.timer);
 },
 methods: {
 getFxItemlist() {
   ...
 }
}

vue局部定时刷新

定时刷新一般都会想到定时器,vue局部定时刷新如下：

设置定时器

    timer: "",//定时器
    
    //定时器刷新待办事项
     this.timer = setInterval(() => {
      self.reload();
    }, 1000);

局部刷新

 <div class="DealtTop" v-if="isRefreshAlive">
 
 isRefreshAlive: true, //刷新
//局部刷新
    reload() {
      this.isRefreshAlive = false;
      this.$nextTick(function() {
        this.isRefreshAlive = true;
      });
    },

如果是在父子组件中，还需要加上provide / inject配合使用，如下：

 provide() {
    return {
      reload: this.reload
    };
  },

清除定时器

destroyed(){
    clearInterval(this.timer);
  },

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 关于vuex状态刷新网页时数据被清空问题及解决

    目录 vuex状态刷新网页时数据被清空 vuex状态在页面刷新时,会清空状态 vuex状态刷新网页时数据被清空 vuex状态管理,在网页刷新数据被清空的解决方法. 在main.js中写入下面的代码段(亲测有效) //刷新保存状态 if (sessionStorage.getItem("store")) { store.replaceState( Object.assign( {}, store.state, JSON.parse(sessionStorage.getItem("

  • vuex刷新页面后如何解决丢失store的数据问题

    目录 vuex刷新页面后丢失store的数据 提出问题 解决方案 vuex刷新页面数据丢失(数据持久化) 存储到localStorage中 存储到sessionStorage中 指定数据持久化 总结 vuex刷新页面后丢失store的数据 提出问题 最近遇到个问题,vue中vuex中的store数据,会在页面刷新后初始化,为了解决这一问题决定将store里面数据在页面刷新前保存到sessionStorage,至于为何用他,因为页面关闭后他会被清空,localStorage则会一直存在,cooki

  • vue 长列表数据刷新的实现及思考

    目录 开篇 一.效果展示 二.代码 开篇 通过 vue 进行列表展示的时候如果数据太多可能会卡顿,这里通过滑动计算只创建跟刷新可见部分 dom 元素,这里仅仅代表着复用思路 一.效果展示 两列均为局部可视范围内数据刷新 二.代码 实现的主要思路: 1.提前保留可视div的高度,计算出可视高度能填满情况下最少的单元格条数: 2.根据提供的每个单元格高度和总数据条数计算出总的可滑动div高度,使其可以滑动: 3.在上述可滑动div内部再包裹一层div,此节点的作用就是在滑动过程中,改变自身的 top

  • Vue刷新后页面数据丢失问题的解决过程

    目录 一.为什么刷新后数据会丢失 二.解决思路 三.解决方法 四.总结 总结 一.为什么刷新后数据会丢失 vuex存储的数据只是在页面中,相当于全局变量,页面刷新的时候vuex里的数据会重新初始化,导致数据丢失.因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值. 二.解决思路 办法一:将vuex中的数据直接保存到浏览器缓存中(sessionStorage.localStorage.cookie) 办法二:在页面刷新的时候再次请求远

  • vue开发中数据更新但视图不刷新的解决方法

    目录 **解决方法1:静默刷新(使用v-if的特性) 解决方法2:Vue.$set(官方推荐) 解决方法3: Vue.$forceUpdate(手动强制更新视图) 解决方法4:Object.assign(使用修改栈能触发视图更新的特性) 解决方法5:对于数组还可以使用splice方法 总结 我们在开发过程中会碰到数据更新,但是视图并未改变的情况,情况如下: 第一种:动态给对象新增属性或者删除属性是不会触发视图刷新的,Vue识别不到: 第二种:通过数组下标修改数组中的元素或者手动修改数组的长度,V

  • vue项目刷新当前页面的三种方式(重载当前页面数据)

    目录 vue项目刷新当前页面的三种方式(重载当前页面数据) 一.this.$router.go(0) 二.location.reload() 三.用provide / inject 组合 PS:vue项目刷新当前页面的三种方法 vue项目刷新当前页面的三种方式(重载当前页面数据) 一.this.$router.go(0) 相当于F5刷新,这种方法虽然代码很少,只有一行,但是体验很差.页面会一瞬间的白屏,体验不是很好 二.location.reload() 这种也是一样,画面一闪,体验不是很好,相

  • vue实现定时刷新数据,每隔5分钟执行一次

    目录 vue定时刷新数据,每隔5分钟执行一次 vue局部定时刷新 设置定时器 局部刷新 清除定时器 总结 vue定时刷新数据,每隔5分钟执行一次 data() { return { timer: null } }, mounted() { // 每隔5分钟定时刷新 this.timer = setInterval(() => { this.getFxItemlist(); }, 300000) }, beforeDestroy() { clearInterval(this.timer); },

  • js每隔5分钟执行一次ajax请求的实现方法

    一个页面好像只能有一个 window.onload=function(){},所以要有多个事件,这样写就好了 复制代码 代码如下: window.onload=function(){ //假设这里每个五分钟执行一次test函数 publicBusi(); personBusi(); } function publicBusi(){ setTimeout(personBusi,1000*60*7);//这里的1000表示1秒有1000毫秒,1分钟有60秒,7表示总共7分钟 $.post('${ba

  • Bootstrap Table实现定时刷新数据的方法

    推荐第二种方法 •令表格的id为realTimeTable 1.毁掉表格,再查询数据后append,如果你查大量的数据(例如:查询很多渠道的信息),而获取服务器数据又太慢,你就会看到表格在一行一行的增加 •定时器,多长时间执行一次,自己定义,此处是30S setInterval(function() { queryAll(); }, 30000); •先定义一个函数,里面放入查询的方法updateRealTimeData和你所自定义使用的方法 function queryAll() { upda

  • 基于Vue实现tab栏切换内容不断实时刷新数据功能

    基于Vue实现tab栏切换内容不断实时刷新数据功能

    先说一下产品需求,就是有几个tab栏,每个tab栏对应的ajax请求不一样,内容区域一样,内容为实时刷新数据,每3s需要重新请求,返回的数据在内容区域展示,每点击一次tab栏需停止其他tab栏ajax请求,防止阻塞,首次加载页面的时候又不能5个ajax同时请求,只需要请求第一个就好 也没有必要建立5个区域,控制显示隐藏,浪费性能,业务代码就不贴了,把大概原理的代码贴上来 先是用jq实现了一版 <!DOCTYPE html> <html lang="en"> &l

  • 解决vue 路由变化页面数据不刷新的问题

    每天记录一点点,把我遇到的问题记录下来, 希望可以帮助到更多和我遇到同样问题的人. 问题描述:通过调接口,动态显示帮助页面的问题列表, 问题列表有多级,当点击的这个问题没有下一级问题的时候跳入内容页. 问题出在,我在电脑上做移动端页面的时候,相继跳到详情页,我想返回,点击 按钮,直接跳转到了如上第一张图的样子,no,no,no,这不是我想要的结果,此刻,想到了通过改变url来改变页面的层级问题. 一级的parent为0,默认不显示或显示. 二级的parent为1,点击一级路由变为如图: 点击进入

  • vue缓存的keepalive页面刷新数据的方法

    用到这个的业务场景是这样的: a页面点击新建列表按钮进入到新建的页面b,填写b页面并点击b页面确认添加按钮,把这些数据带到a页面,填充到列表(数组),可以添加多条, 点击这条的时候进入到编辑页面,确认修改之后,回退到a页面,a页面需要更新这条数据 实现这个功能的时候,由于是路由页面之间的跳转,首先想到的方案有几个:1. 用sessionStorage本地存储:2. 用路由参数带过去:3. 用兄弟组件传值 由于是添加完之后如果按回退是需要退出整个页面,如果用路由跳转,会出现回退到编辑页面了,所以这

  • vue 界面刷新数据被清除 localStorage的使用详解

    localStorage是html5新增的一个本地存储API,它有5M的大小空间,通过(key,value)的方式存储在浏览器中 window.localStorage.setItem('key', value); //储存文件 window.localStorage.getItem('key'); //读取文件 window.localStorage.removeItem('key'); //清除文件 vue中使用方法: 1.新建一个store.js文件 localStorage只能存储字符串

  • vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解

    vue中,我们所要实现的一个场景就是: 1.搜索页面==>到搜索结果页时,搜索结果页面要重新获取数据, 2.搜索结果页面==>点击进入详情页==>从详情页返回列表页时,要保存上次已经加载的数据和自动还原上次的浏览位置. 最近在项目中遇到这个问题,思考了几套方案,总是不太完善.百度搜到的方案也基本都只能满足一些很简单的需求.对于复杂一些的情况,还是有些不完善的地方.以下是个人对于这种场景的一个摸索,也参考了百度.如有更好的方案,欢迎指出. 缓存组件,vue2中提供了keep-alive.首

  • jQuery实现AJAX定时刷新局部页面实例

    方法一: 局部刷新我们讲述到最多的是ajax 了,当然也可以不使用ajax来刷新页面了,我们可以使用jquery中的append来给指定内容加东西了,当然最实用的还是ajax加载数据了. 例子,定时局部刷新 定时局部刷新用到jQuery里面的setInterval方法,setInterval方法两个参数,第一个是设置定时执行的函数名,第二个是时间,如下代码所示,设置每隔10微秒定时执行一次aa方法. <script> $(function(){ setInterval(aa,10); func

  • JQuery实现定时刷新功能代码

    在网页开发中,经常会需要不断的刷新某个页面或某个局部数据.这时候就需要用到定时刷新来实现了.实现方式就是使用JS setInterval函数每隔一段时间请求一次数据,然后将请求结果返回给前端HTML实现刷新. 实现代码如下: <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script> $(function(){ getData(); setIn

随机推荐