vue项目中定时器的管理

最近遇到这种需求，需要定时刷新好几个接口的状态，而且要经常开启关闭轮询，一般我们用setTimeout来实现，并在setTimeout的回调中调用setTimeout来实现这种轮询。

但是在vue项目中会遇到这种情况：页面切换之后或者同一个页面改变请求参数之后，定时器会重复创建，而且定时器轮询的时间开始混乱，比如设定的10s一次，可能会2秒内执行好几次。我试过在页面创建created 和页面销毁 beforeDestory 的时候执行 clearTimeout ，在回调执行setTimeout 之前clearTimeout 但是都不行。

后来想到用vuex去管理定时器，结果符合预期，代码如下

computed:{
  ...mapGetters([
    'timer'
  ])
},
created(){
  this.clearTimer()
},
beforeDestory(){
  this.clearTimer()
},
methods:{
  getList(){
    $axios.post('/api').then(response =>{
      this.$store.dispatch('setTimer',setTimeout(this.getList, 10000))
    })
  },
  clearTimer(){
    if(this.timer){
      clearTimeout(this.timer)
    }
  }
}

如上，在创建页面和销毁页面的时候都判断一次timer 是否存在，如果存在就清除一次定时器，我们利用vuex的 getters 和 actions 来获取和设置定时器，这样就实现了vue项目中定时器的管理。

转载于:https://www.cnblogs.com/pengzhixin/p/7597913.html