欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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)閉
? ? }
}

總結(jié)

到此這篇關(guān)于VUE設(shè)置和清除定時(shí)器的文章就介紹到這了,更多相關(guān)VUE設(shè)置和清除定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Vue實(shí)現(xiàn)無限加載瀑布流

    Vue實(shí)現(xiàn)無限加載瀑布流

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)無限加載瀑布流,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2021-11-11
  • 關(guān)于vue-router路徑計(jì)算問題

    關(guān)于vue-router路徑計(jì)算問題

    這篇文章主要介紹了關(guān)于vue-router路徑計(jì)算問題,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧
    2017-05-05
  • Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟

    Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟

    隨著 Vite2 的發(fā)布并日趨穩(wěn)定,現(xiàn)在越來越多的項(xiàng)目開始嘗試使用它。本文我們就介紹了Vite創(chuàng)建項(xiàng)目的實(shí)現(xiàn)步驟,感興趣的可以了解一下
    2021-07-07
  • Vue中nprogress頁面加載進(jìn)度條的方法實(shí)現(xiàn)

    Vue中nprogress頁面加載進(jìn)度條的方法實(shí)現(xiàn)

    這篇文章主要介紹了Vue中nprogress頁面加載進(jìn)度條的方法實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
    2020-11-11
  • 移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能

    移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能

    經(jīng)常遇到這樣的需求,移動(dòng)端中的導(dǎo)航并不是在頂部也不是在底部,而是在最底部且是固定的,當(dāng)我們點(diǎn)擊該導(dǎo)航項(xiàng)時(shí)會(huì)切換到對(duì)應(yīng)的組件。這篇文章主要介紹了移動(dòng)端底部導(dǎo)航固定配合vue-router實(shí)現(xiàn)組件切換功能,需要的朋友可以參考下
    2019-06-06
  • vuecli中chainWebpack的常用操作舉例

    vuecli中chainWebpack的常用操作舉例

    在項(xiàng)目開發(fā)中我們難免碰到需要對(duì)webpack配置更改的情況,下面這篇文章主要給大家介紹了關(guān)于vuecli中chainWebpack的常用操作舉例,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2022-10-10
  • vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能

    vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能

    這篇文章主要介紹了vue.js中使用echarts實(shí)現(xiàn)數(shù)據(jù)動(dòng)態(tài)刷新功能,需要的朋友可以參考下
    2019-04-04
  • el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)

    el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換)

    這篇文章主要介紹了el-table實(shí)現(xiàn)轉(zhuǎn)置表格的示例代碼(行列互換),本文結(jié)合示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
    2024-02-02
  • Vue原理剖析 實(shí)現(xiàn)雙向綁定MVVM

    Vue原理剖析 實(shí)現(xiàn)雙向綁定MVVM

    這篇文章主要為大家剖析了Vue原理,實(shí)現(xiàn)雙向綁定MVVM,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-05-05
  • 解決Vue在Tomcat8下部署頁面不加載的問題

    解決Vue在Tomcat8下部署頁面不加載的問題

    今天小編就為大家分享一篇解決Vue在Tomcat8下部署頁面不加載的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2019-11-11

最新評(píng)論