快捷導航

VUE設(shè)置和清除定時器的方式及遇到的問題

更新時間：2022年10月28日 11:20:45 作者：marsur

?最近需要再頁面里做個倒計時,發(fā)現(xiàn)用clearInterval()清除定時器失效,下面這篇文章主要給大家介紹了關(guān)于VUE設(shè)置和清除定時器的方式及遇到的問題的相關(guān)資料,需要的朋友可以參考下

方法一、在生命周期函數(shù)beforeDestroy中清除

data() {
    return {
      timer: null;
    };
},
created() {    
    // 設(shè)置定時器，5s執(zhí)行一次
    this.timer = setInterval(() => {
      console.log('setInterval');
    }, 5000);
}
beforeDestroy () {
    //清除定時器
    clearInterval(this.timer);
    this.timer = null;
}

方法二、使用hook:beforedestroy（推薦）

created() {    
    // 設(shè)置定時器，5s執(zhí)行一次
    let timer = setInterval(() => {
      console.log('setInterval');
    }, 5000);
 
    // 離開當前頁面時銷毀定時器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer);
      timer = null;
    })
}

該方法與在生命周期鉤子beforeDestroy中清除定時器的操作原理一樣，但更有優(yōu)勢

1.無需在vue實例上定義定時器，減少不必要的內(nèi)存浪費

2.設(shè)置和清除定時器的代碼放在一塊，可讀性維護性更好

三、beforeDestroy函數(shù)沒有觸發(fā)的情況

1、原因

<router-view>外層包裹了一層<keep-alive>

< keep-alive > 有緩存的作用，可以使被包裹的組件狀態(tài)維持不變，當路由被 keep-alive 緩存時不走 beforeDestroy 生命周期。被包含在

< keep-alive > 中創(chuàng)建的組件，會多出兩個生命周期鉤子: activated 與 deactivated。

activated

在組件被激活時調(diào)用，在組件第一次渲染時也會被調(diào)用，之后每次keep-alive激活時被調(diào)用。

deactivated

在組件失活時調(diào)用。

2、解決方案

借助 activated 和 deactivated 鉤子來設(shè)置和清除定時器

(1)生命周期鉤子

created() {
    // 頁面激活時設(shè)置定時器
    this.$on("hook:activated", () => {
        let timer = setInterval(()=>{
          console.log("setInterval");
        },1000)
    })
 
    // 頁面失活時清除定時器
    this.$on("hook:deactivated", ()=>{
      clearInterval(timer);
      timer = null;
    })
  }

(2)hook

data() {
    return {
      timer: null // 定時器
    }
},
activated() {
    // 頁面激活時開啟定時器
    this.timer = setInterval(() => {
      console.log('setInterval');
    }, 5000)
},
deactivated() {
    // 頁面關(guān)閉（路由跳轉(zhuǎn)）時清除定時器
    clearInterval(this.timer)
    this.timer = null
},

附：vue離開頁面銷毀定時器

vue 是單頁面應(yīng)用，路由切換后，定時器并不會自動關(guān)閉，需要手動清除，當頁面被銷毀時，清除定時器即可。

data: {
? ? return {
? ? ? ? timer: null
? ? }
},
created() {
? ? this.timer = setInterval(....);
},
beforeDestroy() {
? ? if(this.timer) { //如果定時器還在運行 或者直接關(guān)閉，不用判斷
? ? ? ? clearInterval(this.timer); //關(guān)閉
? ? }
}