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 相关文章推荐
Js之软键盘实现(js源码)
Jan 30 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
ES6新特征数字、数组、字符串
Oct 01 Javascript
vue 2.0封装model组件的方法
Aug 03 Javascript
聊聊JS动画库 Velocity.js的使用
Mar 13 Javascript
Bootstrap模态对话框中显示动态内容的方法
Aug 10 Javascript
在vue项目中引用Iview的方法
Sep 14 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
JavaScript进阶(四)原型与原型链用法实例分析
May 09 Javascript
js对象属性名驼峰式转下划线的实例代码
Sep 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 set_time_limit()函数的使用详解
2013/06/05 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
js加解密 脚本解密
2008/02/22 Javascript
JS中prototype关键字的功能介绍及使用示例
2013/07/21 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
我的Node.js学习之路(四)--单元测试
2014/07/06 Javascript
jQuery的context属性用法实例
2014/12/27 Javascript
jQuery简单几行代码实现tab切换
2015/03/10 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
2016/03/08 Javascript
js判断iframe中元素是否存在的实现代码
2016/12/24 Javascript
JS实现移动端判断上拉和下滑功能
2017/08/07 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
基于node下的http小爬虫的示例代码
2018/01/11 Javascript
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
Vue入门之数量加减运算操作示例
2018/12/11 Javascript
解决layui的table插件无法多层级获取json数据的问题
2019/09/19 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
Vue中实现回车键切换焦点的方法
2020/02/19 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
详解vue-router的导航钩子(导航守卫)
2020/11/02 Javascript
python3使用tkinter实现ui界面简单实例
2014/01/10 Python
python实现上传样本到virustotal并查询扫描信息的方法
2014/10/05 Python
利用Python读取txt文档的方法讲解
2018/06/23 Python
python 如何设置守护进程
2020/10/29 Python
Under Armour安德玛英国官网:美国高端运动科技品牌
2018/09/17 全球购物
英国剑桥包中文官网:The Cambridge Satchel Company中国
2018/11/06 全球购物
Java面试中常遇到的问题,也是需要注意的几点
2013/08/30 面试题
高职教师岗位职责
2013/12/24 职场文书
酒店经理职责
2014/01/30 职场文书
2016元旦晚会主持词
2015/07/01 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
职工食堂管理制度
2015/08/06 职场文书
幼儿教师继续教育培训心得体会
2016/01/19 职场文书
南阳市白酒市场的调查报告
2019/11/08 职场文书