Vue項目中使用和清除定時器

一、方法1

1）在首先在vue實例的data中定義定時器的名稱：

export default{
  data(){
    timer:null  
  }
}

 

2）在方法（methods）或者頁面初始化（mounted()）的時候使用定時器

this.timer = setInterval(()=>{
  //需要做的事情
},1000);

 

3）然后在頁面銷毀的生命周期函數（beforeDestroy()）中銷毀定時器

export default{
  data(){
    timer:null  
  },
  beforeDestroy(){
    clearInterval(this.timer);
    this.timer = null;
  }
}

 

這種方法是可行的，但是也存在一定的問題：

1、vue實例中需要有這個定時器的實例，感覺有點多余;

2、 創建的定時器代碼和銷毀定時器的代碼沒有放在一起，通常很容易忘記去清理這個定時器，不容易維護;

 

二、方法2

直接在需要定時器的方法或者生命周期函數中聲明並銷毀

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

這種方法創建和銷毀放在一處，是比較好的方法