快捷導(dǎo)航

vue中銷(xiāo)毀定時(shí)器的幾種解決方案

更新時(shí)間：2023年08月18日 10:05:19 作者：ldcaws

這篇文章主要給大家介紹了關(guān)于vue中銷(xiāo)毀定時(shí)器的幾種解決方案,銷(xiāo)毀定時(shí)器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時(shí)器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下

引言

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

場(chǎng)景：在A.vue頁(yè)面有一個(gè)定時(shí)a，然后跳轉(zhuǎn)到B.vue頁(yè)面，此時(shí)A頁(yè)面的定時(shí)器a依然在運(yùn)行。

解決方式一：

首先在data里進(jìn)行定義定時(shí)器；

data() {                   
  return {                                          
   timer: null  // 定時(shí)器名稱(chēng)                 
  }         
},

然后在mounted里使用定時(shí)器；

this.timer= setInterval(() => {
	  // 操作
      method();
    }, 60000);

最后在beforeDestroy里清除定時(shí)器；

beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
    }
  },

解決方式二：

通過(guò)$once這個(gè)事件偵聽(tīng)器在定義完定時(shí)器之后的位置來(lái)清除定時(shí)器。

    this.timer= setInterval(() => {
      // 操作
      method();
    }, 60000);
    // 通過(guò)$once來(lái)監(jiān)聽(tīng)定時(shí)器，在beforeDestroy鉤子可以被清除
    this.$once('hook:beforeDestroy', () => {
      clearInterval(this.timer);
    })

解決方式三：

beforeRouteLeave(to, from, next){
    next();
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  },

附：vue離開(kāi)頁(yè)面時(shí)清除定時(shí)器

let timer = setInterval(function(){
	console.log("我是定時(shí)器=====");
},2000);
this.$once("hook:beforeDestroy", () =>{
    clearInterval(timer);
});

總結(jié)

到此這篇關(guān)于vue中銷(xiāo)毀定時(shí)器的幾種解決方案的文章就介紹到這了,更多相關(guān)vue銷(xiāo)毀定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue install 注冊(cè)全局組件方式
這篇文章主要介紹了vue install 注冊(cè)全局組件方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-03-03
Vue數(shù)據(jù)綁定簡(jiǎn)析小結(jié)
這篇文章主要介紹了Vue數(shù)據(jù)綁定簡(jiǎn)析小結(jié)，本文將從源碼的角度來(lái)對(duì)Vue響應(yīng)式數(shù)據(jù)中的觀察者模式進(jìn)行簡(jiǎn)析。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05
使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案
在 Vue 的響應(yīng)式系統(tǒng)中,reactive 對(duì)象是一個(gè)深度代理,它會(huì)追蹤對(duì)象屬性的變更,但如果你將整個(gè)對(duì)象重新賦值,那么 Vue 無(wú)法繼續(xù)追蹤新的對(duì)象,本文給大家介紹了使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案,需要的朋友可以參考下
2024-09-09
Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
在Vue項(xiàng)目中導(dǎo)出Excel表格是常見(jiàn)的功能,特別是在后臺(tái)管理系統(tǒng)中,為了方便用戶(hù)將大量數(shù)據(jù)保存為本地文件,這篇文章主要給大家介紹了關(guān)于Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用的相關(guān)資料,需要的朋友可以參考下
2024-06-06
Vue3使用axios請(qǐng)求攔截器和vuex設(shè)置全局loading方式
本文介紹了如何在Vue.js項(xiàng)目中實(shí)現(xiàn)全局loading加載動(dòng)畫(huà),并通過(guò)axios攔截器控制loading的顯示與隱藏
2025-12-12
vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
這篇文章主要介紹了vue router下的html5 history在iis服務(wù)器上的設(shè)置方法，需要的朋友參考下吧
2017-10-10
vue實(shí)現(xiàn)物流時(shí)間軸效果
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)物流時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
Vue el-table 默認(rèn)展開(kāi)某一行的實(shí)例
這篇文章主要介紹了Vue el-table 默認(rèn)展開(kāi)某一行的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件
這篇文章主要介紹了vue3實(shí)現(xiàn)手機(jī)上可拖拽元素的組件，用vue3實(shí)現(xiàn)一個(gè)可在手機(jī)上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣
2022-09-09
React DOM diff 對(duì)比Vue DOM diff
這篇文章主要為大家介紹了React DOM diff 對(duì)比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09