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中的作用域链和闭包
Jun 30 Javascript
javascript实现全角与半角字符的转换
Jan 07 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
Aug 06 Javascript
AngularJS入门教程之AngularJS 模板
Aug 18 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
jQuery获取Table某列的值(推荐)
Mar 03 Javascript
TypeScript入门-接口
Mar 30 Javascript
js canvas实现放大镜查看图片功能
Jun 08 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
Vue+Vuex实现自动登录的知识点详解
Mar 04 Javascript
vue实现短信验证码输入框
Apr 17 Javascript
Vue如何实现组件间通信
May 15 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
浅谈thinkphp的实例化模型
2015/01/04 PHP
php正则判断是否为合法身份证号的方法
2017/03/16 PHP
购物车实现的几种方式优缺点对比
2018/05/02 PHP
Jquery自定义button按钮的几种方法
2014/06/11 Javascript
jquery实现的用户注册表单提示操作效果代码分享
2015/08/28 Javascript
全面理解闭包机制
2016/07/11 Javascript
js H5 canvas投篮小游戏
2016/08/18 Javascript
JS取数字小数点后两位或n位的简单方法
2016/10/24 Javascript
JavaScript原生编写《飞机大战坦克》游戏完整实例
2017/01/04 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
微信小程序之网络请求简单封装实例详解
2017/06/28 Javascript
Python 文件和输入输出小结
2013/10/09 Python
在Python中利用Into包整洁地进行数据迁移的教程
2015/03/30 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
python 输入一个数n,求n个数求乘或求和的实例
2018/11/13 Python
python 定时任务去检测服务器端口是否通的实例
2019/01/26 Python
Python面向对象之继承和多态用法分析
2019/06/08 Python
PHP统计代码行数的小代码
2019/09/19 Python
Tensorflow tf.nn.atrous_conv2d如何实现空洞卷积的
2020/04/20 Python
解决python3中os.popen()出错的问题
2020/11/19 Python
python3实现简单飞机大战
2020/11/29 Python
CSS3颜色值RGBA与渐变色使用介绍
2020/03/06 HTML / CSS
SmartBuyGlasses台湾:名牌眼镜,名牌太阳眼镜及隐形眼镜
2017/01/04 全球购物
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
美国家用和厨房电器销售网站:Appliances Connection
2020/01/24 全球购物
Farfetch巴西官网:奢侈品牌时尚购物平台
2020/10/19 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
保险专业大专生求职信
2013/10/26 职场文书
母亲80寿诞答谢词
2014/01/16 职场文书
党的群众路线查摆剖析材料
2014/10/10 职场文书
2014年最新版离婚协议书范本
2014/11/25 职场文书
作息时间调整通知
2015/04/22 职场文书
python - asyncio异步编程
2021/04/06 Python
python中validators库的使用方法详解
2022/09/23 Python