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 相关文章推荐
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
Sep 04 Javascript
js制作支付倒计时页面
Oct 21 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
Angular项目中$scope.$apply()方法的使用详解
Jul 26 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
vue  directive定义全局和局部指令及指令简写
Nov 20 Javascript
vue父组件给子组件的组件传值provide inject的方法
Oct 23 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
Javascript中Microtask和Macrotask鲜为人知的知识点
Apr 02 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
用cookies来跟踪识别用户
2006/10/09 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
javascript插入样式实现代码
2012/02/22 Javascript
JQuery入门—编写一个简单的JQuery应用案例
2013/01/03 Javascript
JQuery操作Select的Options的Bug(IE8兼容性视图模式)
2013/04/21 Javascript
jquery 实现上下滚动效果示例代码
2013/08/09 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
WordPress中利用AJAX异步获取评论用户头像的方法
2016/01/08 Javascript
一个简易时钟效果js实现代码
2020/03/25 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
详解VUE 对element-ui中的ElTableColumn扩展
2018/03/28 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
详解微信小程序缓存--缓存时效性
2019/05/02 Javascript
关于layui toolbar和template的结合使用方法
2019/09/19 Javascript
JS正则表达式验证密码强度
2020/03/18 Javascript
Vue使用Proxy代理后仍无法生效的解决
2020/11/13 Javascript
如何在vue中使用HTML 5 拖放API
2021/01/14 Vue.js
[03:49]2016完美“圣”典风云人物:AMS专访
2016/12/06 DOTA
Python代理抓取并验证使用多线程实现
2013/05/03 Python
Python利用Beautiful Soup模块创建对象详解
2017/03/27 Python
python 中random模块的常用方法总结
2017/07/08 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
在python中将list分段并保存为array类型的方法
2019/07/15 Python
pytorch sampler对数据进行采样的实现
2019/12/31 Python
PyTorch中的C++扩展实现
2020/04/02 Python
幼儿园教师培训制度
2014/01/16 职场文书
优秀学生干部推荐材料
2014/02/03 职场文书
历史专业学生的自我评价
2014/02/28 职场文书
领导班子三严三实对照检查材料
2014/09/25 职场文书
2014年党员发展工作总结
2014/12/02 职场文书
2014年乡镇团委工作总结
2014/12/18 职场文书
Win11 Build 22000.51版本文件资源管理器“命令栏”和上下文菜单有什么新变化?
2021/11/21 数码科技