1. 程式人生 > 程式設計 >解決vue元件銷燬之後計時器繼續執行的問題

解決vue元件銷燬之後計時器繼續執行的問題

直接上程式碼,以下

window.setTimeout(function(){
 if(this && !this._isDestroyed){ //_isDestroyed 元件是否被銷燬
  return;
 }
 window.location.href = "/serverMonitor?t="+ new Date().getTime();
},5000)

很粗暴的方法,在執行之前看是否被銷燬就行,

第二種方法,呼叫路由元件內的鉤子函式beforeRouteLeave

beforeRouteLeave(to,from,next){
clearTimeout(window.timer);
next();
}

補充知識:vue銷燬時事件,created和mounted&&activated的區別

我就廢話不多說了,大家還是直接看程式碼吧~

// 關閉當前頁面就會銷燬監聽事件(checkpay)
destroyed() {
 clearInterval(this.checkpay)
}
created()在建立vue物件時,在html渲染之前就觸發;但是注意created()只會觸發一次; mounted()在html渲染完成之後才會執行的;
 activated()進入當前存在activated()函式的頁面時,一進入頁面就觸發;可用於初始化頁面資料等

以上這篇解決vue元件銷燬之後計時器繼續執行的問題就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支援我們。