VUE简单的定时器实时刷新的实现方法


Posted in Javascript onJanuary 20, 2019

说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!!

我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下。

思路

其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实如此,你们可以先去尝试一下。

这个小功能实现的自我总结

一开始我感觉很简单,不就是个心跳吗,在methods 中定义一个timer函数返回一个setInterval和一个getData函数,在timer中调用getData, 然后在created中去调用,其中就会有一个问题,就是刚进来页面不会有数据,为什么想必大家肯定会知道,就是这是调用了一个定时器只有时间到了以后才会去请求后台,这个不是很好解决吗,在created 中在调用一次getData不就好了吗,嗯,我就这样做了,虽然我感觉不是很合理,啊啊啊啊,好烦,第一次写不知道如何写,还是用代码来表达,这样比较清楚........

第一版,这样很不合理,因为这样会加载页面发送两次数据,而且还有一个很大的雷,就是setInterval在网页卸载是不会关掉,而且你再次进入这个页面时,定时器会加速,这个BUG应该是因为vue切换页面不会刷新的原因吧,请大佬指教。

<script>
  export default {
    created() {
      this.timer()
      this.getData()
    }
    methods: {
      // 这是一个获取数据
      getData() {
        .....
      }
      // 这是一个定时器
      timer() {
        return setInterval(()=>{
          this.getData()
        },5000)
      }
    },
    destroyed() {
  clearInterval(this.timer)
    }
  }
</script>

第二版,我进行了改进,我把setInterval换成了setTimeout,因为setTimeout只执行一次,所以要靠函数去驱动它,然后我用到了updated,它也有一个弊端,就是有某一个数据更新,它就会触发,所以有时会执行多次。

<script>
  export default {
    created() {
      this.getData()
    }
    methods: {
      // 这是获取数据的函数
      getData() {
        .....
      }
      // 这是一个定时器
      timer() {
        return setTimeout(()=>{
          this.getData()
        },5000)
      }
    },
    updated() {
     this.timer() 
    }
    destroyed() {
  clearTimeout(this.timer)
    }
  }
</script>

最终版

监听list只要它变化就去触发定时器,这样就解决了updated的多次触发。

<script>
  export default {
    data() {
      return {
        list: []  // 获取的数据列表
      }
    }
    created() {
      this.getData()
    }
    methods: {
      // 这是获取数据的函数
      getData() {
        .....
      }
      // 这是一个定时器
      timer() {
        return setTimeout(()=>{
          this.getData()
        },5000)
      }
    },
    watch: {
      list() {
      this.timer() 
      }
    }
    destroyed() {
  clearTimeout(this.timer)
    }
  }
</script>

总结

主要就是要了解vue的钩子函数。可能漏洞很多,希望大佬多多指教,还有就是第一次写,有点词穷,请大家多多担待。、

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
检测jQuery.js是否已加载的判断代码
May 20 Javascript
js获取键盘按键响应事件(兼容各浏览器)
May 16 Javascript
jQuery实现单行文字间歇向上滚动源代码
Jun 02 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
Jan 26 Javascript
jQuery设置单选按钮radio选中/不可用的实例代码
Jun 24 Javascript
vue-router:嵌套路由的使用方法
Feb 21 Javascript
JQuery中Ajax的操作完整例子
Mar 07 Javascript
JS实现根据密码长度显示安全条功能
Mar 08 Javascript
用angular实现多选按钮的全选与反选实例代码
May 23 Javascript
详解react-router如何实现按需加载
Jun 15 Javascript
vue-cli配置环境变量的方法
Jul 09 Javascript
Vue源码探究之虚拟节点的实现
Apr 17 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 #Javascript
Django+vue跨域问题解决的详细步骤
Jan 20 #Javascript
如何在vue里面优雅的解决跨域(路由冲突问题)
Jan 20 #Javascript
JavaScript禁用右键单击优缺点分析
Jan 20 #Javascript
JavaScript中concat复制数组方法浅析
Jan 20 #Javascript
JavaScript中import用法总结
Jan 20 #Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
Jan 20 #Javascript
You might like
php中get_headers函数的作用及用法的详细介绍
2013/04/27 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
jquery(live)中File input的change方法只起一次作用的解决办法
2011/10/21 Javascript
jquery ajax 局部刷新小案例
2014/02/08 Javascript
纯CSS3代码实现滑动开关效果
2015/08/19 Javascript
JavaScript子窗口调用父窗口变量和函数的方法
2015/10/09 Javascript
详解Angularjs filter过滤器
2016/02/06 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
Angularjs修改密码的实例代码
2017/05/26 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
axios 封装上传文件的请求方法
2018/09/26 Javascript
微信小程序实现顶部导航特效
2019/01/28 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
2020/04/29 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[50:29]2014 DOTA2华西杯精英邀请赛 5 24 DK VS iG
2014/05/26 DOTA
详解Python中的日志模块logging
2015/06/19 Python
基于python中staticmethod和classmethod的区别(详解)
2017/10/24 Python
Python实现的计算马氏距离算法示例
2018/04/03 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
Python 获取numpy.array索引值的实例
2019/12/06 Python
python库skimage给灰度图像染色的方法示例
2020/04/27 Python
如何在python中实现线性回归
2020/08/10 Python
Python使用Opencv实现边缘检测以及轮廓检测的实现
2020/12/31 Python
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
龟牌英国商店:Turtle Wax Brand Store UK
2019/07/02 全球购物
学期自我鉴定范文
2013/10/01 职场文书
部门活动策划方案
2014/08/16 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2014年妇女工作总结
2014/12/06 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
2015年秋季开学典礼校长致辞
2015/07/16 职场文书
个人合作协议范本
2015/08/06 职场文书