vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue轮询状态更改(钩子函数)

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 是监听页面销毁钩子函数

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文