vue 如何清除定时器

在页面中需要定时刷新局部数据，在数据变化是否频繁的情况下，没有必要使用webSocket，因为数据变化频繁，数据实时变化太快看不清楚。因此页面会定时调用后台接口以达到实时刷新数据的效果。

　　1、在data中定义一个定时器变量，timer

　　2、在mounted中把定时器的复制为timer

　　3、页面离开前，在beforeDestroy 中清除定时器timer

data() {
  return {
    timer:null, //定时器名称
  }
}，
created() {
  this.getHangTotal();
},
mounted() {
  this.timer = setInterval(
    this.getHangTotal, 10000
  );
}，
beforeDestroy(){
  clearInterval(this.timer);　　// 清除定时器
  this.timer = null;
},
methods: {
　　getHangTotal(){ 
      //………… 
    }
}

 

1、在data函数里面进行定义定时器名称

2、在beforeDestroy()生命周期内清除定时器

这种做法的缺点是：

　　（1）vue实例中需要有这个定时器的实例，感觉有点多余;

　　（2）创建的定时器代码和销毁定时器的代码没有放在一起，通常很容易忘记去清理这个定时器，不容易维护;

新的清除定时器方法是通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。优点是使得代码可读性更强，一目了然。

直接在需要定时器的方法或者生命周期函数中声明并销毁

export default{
  methods:{
    fun1(){
      const timer = setInterval(()=>{
        //需要做的事情
         console.log(11111);
      },1000);
      this.$once('hook:beforeDestroy',()=>{
        clearInterval(timer);
        timer = null;
      })
    }
  }
}