vue单页应用中,使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。...

使用VUE开发单页项目时遇到这样的问题,mounted中使用setInterval()定时向服务器获取数据,后来跳转页面后,发现还在不停的获取数据。我以为是因为我路由用的push导致的,改成replace也是这样,后来就在博客园找到答案了,如下:

http://www.cnblogs.com/zzbp/p/5834110.html

问题:(javascript)使用Vuejs + Vue-router 开发单页面,如何使得切换页面时能销毁原组件?
描述:

我有一个单页面应用,有页面A和页面B,二者是同级组件,关系是这样的:

 

复制代码
router.map({
'/a': {
    component: A
},

'/b': {
    component: B
},`
复制代码

例如,第一次打开时,显示页面 A,页面 A 有一个setInterval事件,每隔一秒钟会向后台发送一个Ajax请求。这时我点击页面 A 上的跳转按钮,跳到页面 B,通过观察网络连接,发现页面 A 上的Ajax请求仍然在继续。

请问应当进行什么样的设置,才能使得页面切换时,原来的组件就被销毁?

这是个非常严重的问题,同级组件绑定的事件,还会在另一个组件里继续监听。所以我猜想会有简单的配置方法,但我看遍了 Vue 的文档和 Vue-router 的文档,也未发现相关配置。

解决方案1:

1、setInterval事件和组件的生命周期没有直接关系。
2、setInterval会返回一个ID 值。setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

解决方案2:

router切换时,原来的组件确实已经销毁了,你可以看到ready生命周期函数是每次都触发了的。你这里的问题不在于组件是否销毁,因为setInterval事件本身和组件没有关系。

setInterval相当于该组件申请的一种资源,在使用该组件时获取,在离开该组件时释放。这个过程只能是你手动进行的。所以你应该在离开该组件时,比如route的deactivate或者beforeDestory生命周期函数里手动clearInterval。

其实很多框架里都是这样,比如桌面程序中某个窗口初始化时需要打开数据库连接(我们也可以视为一种资源),当窗口关闭时,程序本身并不知道“打开数据库连接”的反向操作是什么。所以我们需要在窗口销毁的回调方法里手动去释放这个资源,去写断开连接的代码。

解决方案3:

http://stackoverflow.com/questions/35104770/how-to-destroy-a-component-when-building-spa-with-vue-js-and-vue-router

http://vuejs.github.io/vue-router/zh-cn/pipeline/deactivate.html

 

最后我根据解决方案1解决了,贴下我的代码:

created () {
      this.intervalid1 = setInterval(() => {
        var sid = this.stationid
        this.$store.dispatch('fetchStationDetail', sid)
      }, 20000)
      this.intervalid2 = setInterval(() => {
        var sid = this.stationid
        var thedate = new Date(this.seldate)
        var nowdate = new Date()
        if (thedate.toLocaleDateString() === nowdate.toLocaleDateString()) {
          var theyear = thedate.getFullYear()
          var themonth = thedate.getMonth() + 1
          this.$store.dispatch('fetchStationPowers', {
            id: sid,
            yearint: theyear,
            monthint: themonth
          })
        }
      }, 60000)
    },
beforeDestroy () {
      clearInterval(this.intervalid1)
      clearInterval(this.intervalid2)
    },

 

转载于:https://www.cnblogs.com/lrj567/p/6141061.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值