大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相應的頁面中,在beforeDestroy中可以監聽到,將定時器清空,又或是通過this._isDestroyed,可以判斷出是否還在當前生命周期中,true為不在,false為還在;
今天要說的是在瀏覽器打開新窗口的情況下將上一頁面的定時器清空;
代碼如下:
export: {
methods: {
/***
*定時器刷新接口
* */
timeRefresh(){
if(this.isLeave) return false;
//你所需要定時刷新請求的方法OR接口 5秒一刷新
this.refreshData = window.setTimeout(this.timeRefresh, 5000);
}
},
mounted() {
this.timeRefresh();
let self = this;
//此方法可以監聽到瀏覽器切換頁面,也就是離開當前頁面時的動態;為了保險起見,建議在beforeDestroy中也清空定時器;
document.addEventListener('visibilitychange',() => { //瀏覽器tab標簽切換事件
if(document.visibilityState == 'hidden') { //狀態判斷 沒在當前頁面呆着
self.isLeave = true;
if(self.refreshData) window.clearTimeout(self.refreshData); self.refreshData = null;
}else { //回來了
self.isLeave = false;
self.refreshData = setTimeout(self.timeRefresh, ((new Date).getTime() % 5000));
}
});
},
data() {
return {
isLeave: false,//定義變量判斷是否還停留在當前此頁面中
refreshData : null,//定時器定義變量
}
}
}