快捷導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

1、原因

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

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

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

activated

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

deactivated

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

2、解決方案

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

(1)生命周期鉤子

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

(2)hook

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

附：vue離開頁面銷毀定時(shí)器

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

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