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>
复制代码

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

淘宝、天猫电商运营百科全书

淘宝、天猫电商运营百科全书

刘涛 / 电子工业出版社 / 2016-7 / 59.00元

有人说淘宝、天猫上90%的卖家不赚钱,我认为说得有点大了。因为如果说大家都不赚钱或者在亏钱,为什么去年在做店铺的卖家,今年还在继续?那些不赚钱的卖家,多数是没意识到市场的变化,还在用原来的套路运营店铺。市场在变,但卖家的思路却没有转变,不赚钱也在情理之中,因为淘宝、天猫的玩法变了。做店铺就是好比一场“打怪”升级的游戏,每次的升级都需要强大的装备与攻略。优胜劣汰,能活下去并且能赚钱的卖家,都是在不停......一起来看看 《淘宝、天猫电商运营百科全书》 这本书的介绍吧!

HTML 压缩/解压工具
HTML 压缩/解压工具

在线压缩/解压 HTML 代码

MD5 加密
MD5 加密

MD5 加密工具

SHA 加密
SHA 加密

SHA 加密工具