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的执行顺序 之jQuery.html并非万能钥匙
Mar 03 Javascript
Jquery 的outerHeight方法使用介绍
Sep 11 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
JavaScript基于ajax编辑信息用法实例
Jul 15 Javascript
浅谈JQuery+ajax+jsonp 跨域访问
Jun 25 Javascript
JS中去掉array中重复元素的方法
May 26 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
微信小程序实现页面浮动导航
Jan 28 Javascript
关于Vue源码vm.$watch()内部原理详解
Apr 26 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
小程序开发中如何使用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若干单维数组遍历方法的比较
2011/09/20 PHP
str_replace只替换一次字符串的方法
2013/04/09 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
phpfpm的作用和用法
2019/10/10 PHP
Dom 是什么的详细说明
2010/10/25 Javascript
javascript淡入淡出效果的实现思路
2012/03/31 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
完美解决IE低版本不支持call与apply的问题
2013/12/05 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
js检验密码强度(低中高)附图
2014/06/05 Javascript
js实现点击文本框显示日期选择器特效代码分享
2020/05/21 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
js时间戳与日期格式之间转换详解
2017/12/11 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
spring+angular实现导出excel的实现代码
2019/02/27 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
js实现搜索提示框效果
2020/09/05 Javascript
[36:05]完美世界DOTA2联赛循环赛 Forest vs DM 第一场 11.06
2020/11/06 DOTA
django启动uwsgi报错的解决方法
2018/04/08 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
Python中zip函数如何使用
2020/06/04 Python
Booking.com德国:预订最好的酒店和住宿
2020/02/16 全球购物
利用promise及参数解构封装ajax请求的方法
2021/03/24 Javascript
传播学毕业生求职信
2013/10/11 职场文书
国际贸易专业个人鉴定
2014/02/22 职场文书
园艺专业毕业生求职信
2014/09/02 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
奠基仪式致辞
2015/07/30 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书
python如何利用cv2模块读取显示保存图片
2021/06/04 Python
vue css 相对路径导入问题级踩坑记录
2022/06/05 Vue.js