vue项目中轮询状态更改方式(钩子函数)
作者:骑上我心爱的小摩托
这篇文章主要介绍了vue项目中轮询状态更改方式(钩子函数),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
vue项目中轮询状态更改
在实际项目中,对于实时存储改变的数据,如果不是使用websoct,就需要使用到轮询,对于轮询实际是前端设置的定时器,不停存储获取数据并进行更改。
而对于退出该界面后,轮询逻辑依然在定时器的执行中进行,此时需要用到钩子函数判断路由离开状态后,进行清除定时器
//离开当前页面 beforeRouteLeave(to, from, next) { window.clearInterval(this.myInterval); //清除定时器 next(); },
vue轮询方法及清除
<script> var Vue = new Vue({ el: '#app', data: { timer: null, }, created() { this.pollfun() }, methods: { //轮询 pollfun() { this.timer = window.setInterval(() => { setTimeout(() => { this.getDetes() }, 0) }, 3000) }, //清除轮询 clearfun() { clearInterval(this.timer); this.timer = null; } }, //离开页面清除 destroyed() { window.clearInterval(this.timer) } }) </script>
destroyed 是监听页面销毁钩子函数
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。