VUE設置和清除定時器的方式及遇到的問題
更新時間：2022年10月28日 11:20:45 作者：marsur
?最近需要再頁面里做個倒計時,發(fā)現(xiàn)用clearInterval()清除定時器失效,下面這篇文章主要給大家介紹了關于VUE設置和清除定時器的方式及遇到的問題的相關資料,需要的朋友可以參考下
方法一、在生命周期函數(shù)beforeDestroy中清除
data() {
return {
timer: null;
};
},
created() {
// 設置定時器，5s執(zhí)行一次
this.timer = setInterval(() => {
console.log('setInterval');
}, 5000);
}
beforeDestroy () {
//清除定時器
clearInterval(this.timer);
this.timer = null;
}方法二、使用hook:beforedestroy（推薦）
created() {
// 設置定時器，5s執(zhí)行一次
let timer = setInterval(() => {
console.log('setInterval');
}, 5000);
// 離開當前頁面時銷毀定時器
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
timer = null;
})
}該方法與在生命周期鉤子beforeDestroy中清除定時器的操作原理一樣，但更有優(yōu)勢
1.無需在vue實例上定義定時器，減少不必要的內存浪費
2.設置和清除定時器的代碼放在一塊，可讀性維護性更好
三、beforeDestroy函數(shù)沒有觸發(fā)的情況
1、原因
<router-view>外層包裹了一層<keep-alive>
< keep-alive > 有緩存的作用，可以使被包裹的組件狀態(tài)維持不變，當路由被 keep-alive 緩存時不走 beforeDestroy 生命周期。被包含在
< keep-alive > 中創(chuàng)建的組件，會多出兩個生命周期鉤子: activated 與 deactivated。
activated
在組件被激活時調用，在組件第一次渲染時也會被調用，之后每次keep-alive激活時被調用。
deactivated
在組件失活時調用。
2、解決方案
借助 activated 和 deactivated 鉤子來設置和清除定時器
(1)生命周期鉤子
created() {
// 頁面激活時設置定時器
this.$on("hook:activated", () => {
let timer = setInterval(()=>{
console.log("setInterval");
},1000)
})
// 頁面失活時清除定時器
this.$on("hook:deactivated", ()=>{
clearInterval(timer);
timer = null;
})
}(2)hook
data() {
return {
timer: null // 定時器
}
},
activated() {
// 頁面激活時開啟定時器
this.timer = setInterval(() => {
console.log('setInterval');
}, 5000)
},
deactivated() {
// 頁面關閉（路由跳轉）時清除定時器
clearInterval(this.timer)
this.timer = null
},附：vue離開頁面銷毀定時器
vue 是單頁面應用，路由切換后，定時器并不會自動關閉，需要手動清除，當頁面被銷毀時，清除定時器即可。
data: {
? ? return {
? ? ? ? timer: null
? ? }
},
created() {
? ? this.timer = setInterval(....);
},
beforeDestroy() {
? ? if(this.timer) { //如果定時器還在運行 或者直接關閉，不用判斷
? ? ? ? clearInterval(this.timer); //關閉
? ? }
}總結
到此這篇關于VUE設置和清除定時器的文章就介紹到這了,更多相關VUE設置和清除定時器內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了Vue.Draggable實現(xiàn)交換位置，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-04-04
這篇文章主要介紹了Vue路由切換的兩種方式,主要包括標簽切換和js切換，本文結合示例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-12-12
vue使用axios獲取不到響應頭Content-Disposition的問題及解決
這篇文章主要介紹了vue使用axios獲取不到響應頭Content-Disposition的問題及解決,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
VUE使用docxtemplater導出word文檔實例(帶圖片)
docxtemplate支持的功能很多,語法包含變量替換、條件判斷、循環(huán)、列表循環(huán)、表格循環(huán)等,下面這篇文章主要給大家介紹了關于VUE使用docxtemplater導出word功能(帶圖片)的相關資料,需要的朋友可以參考下2023-06-06
Typescript 5年內的熱度隨時間變化的趨勢，整體呈現(xiàn)一個上升的趨勢。也說明ts越來越️受大家的關注了。這篇文章主要介紹了Vue 中使用 typescript的方法詳解,需要的朋友可以參考下2020-02-02
使用echarts點擊按鈕從新渲染圖表并更新數(shù)據(jù)
這篇文章主要介紹了使用echarts點擊按鈕從新渲染圖表并更新數(shù)據(jù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
vue-cli提供的腳手架只是一個最基礎的，也可以說是Vue團隊認為的工程結構的一種最佳實踐。這篇文章主要介紹了vue-cli的工程模板與構建工具 ,需要的朋友可以參考下2018-09-09
axios 是一個基于Promise 用于瀏覽器和 nodejs 的 HTTP 客戶端。這篇文章主要介紹了vue axios 簡單封裝以及思考 ,需要的朋友可以參考下2018-10-10
VUE2—defineProperty和VUE3—proxy使用方式
Vue2和Vue3的響應式原理不同,Vue2使用Object.defineProperty,Vue3使用Proxy,Object.defineProperty可以監(jiān)聽某個屬性,但不能監(jiān)聽整個對象,且無法監(jiān)聽對象屬性的新增和刪除,Proxy可以監(jiān)聽整個對象,且不會修改原數(shù)據(jù),可以監(jiān)聽數(shù)組的長度變化2025-01-01
這篇文章主要為大家詳細介紹了Vue實現(xiàn)菜單切換功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11