VUE简单的定时器实时刷新
栏目: JavaScript · 发布时间: 5年前
内容简介:说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!!我前段时间刚刚写了一个类似余股票的项目,上边的K线图是要实时去刷新的,所以要用vue做一个心跳,当然大家也可以选择用websocket,大佬们感觉肯定很简单,但是我只是一个刚入门的小前端,特此记录一下。其实思路很简单,首先要了解vue的生命周期和vue的内置函数,其思路就是先定义一个定时器,然后去定时请求后台,到最后关闭这个定时器,哈哈,是不是都是废话,但是确实如此,你们可以先去尝试
说明:我只是一个刚入门的小前端,你们可以指导我,但千万不要喷我,虽然我知道我很垃圾!人吗,都是要成长的!大佬,请多多指教!!!
我前段时间刚刚写了一个类似余股票的项目,上边的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> 复制代码
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Spring Boot 2 整合 QuartJob,实现定时器实时管理
- 各种定时器--最全的定时器使用
- java定时器无法自动注入的问题解析(原来Spring定时器可以这样注入service)
- Golang定时器陷阱
- jmeter(七)定时器
- iOS定时器使用
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Linux从入门到精通
刘忆智、等 / 清华大学出版社 / 2010-1-1 / 59.00元
linux是目前增长最迅速的操作系统。本书由浅入深、循序渐进地向读者介绍linux的基本使用和系统管理。全书内容包括linux概述、linux安装、linux基本配置、桌面环境基本操作、shell基本命令、文件和目录管理、软件包管理、磁盘管理、用户与用户组管理、进程管理、网络配置、浏览网页、收发邮件、文件传输和共享、远程登录、多媒体应用、图像浏览和处理、打印机配置、办公软件的使用、linux编程工......一起来看看 《Linux从入门到精通》 这本书的介绍吧!