vue中銷毀定時器的幾種解決方案
更新時間：2023年08月18日 10:05:19 作者：ldcaws
這篇文章主要給大家介紹了關(guān)于vue中銷毀定時器的幾種解決方案,銷毀定時器的操作一般是在beforeDestroy鉤子中進(jìn)行，根據(jù)定時器的數(shù)量不同可以有多種解決方法,需要的朋友可以參考下
引言
vue是單頁面應(yīng)用，路由切換后，定時器并不會自動關(guān)閉，需要手動清除，當(dāng)頁面被銷毀時，清除定時器即可。
場景：在A.vue頁面有一個定時a，然后跳轉(zhuǎn)到B.vue頁面，此時A頁面的定時器a依然在運行。
解決方式一：
- 首先在data里進(jìn)行定義定時器；
data() {
return {
timer: null // 定時器名稱
}
},- 然后在mounted里使用定時器；
this.timer= setInterval(() => {
// 操作
method();
}, 60000);- 最后在beforeDestroy里清除定時器；
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer);
}
},解決方式二：
通過$once這個事件偵聽器在定義完定時器之后的位置來清除定時器。
this.timer= setInterval(() => {
// 操作
method();
}, 60000);
// 通過$once來監(jiān)聽定時器，在beforeDestroy鉤子可以被清除
this.$once('hook:beforeDestroy', () => {
clearInterval(this.timer);
})解決方式三：
beforeRouteLeave(to, from, next){
next();
if (this.timer) {
clearInterval(this.timer);
this.timer = null;
}
},附：vue離開頁面時清除定時器
let timer = setInterval(function(){
console.log("我是定時器=====");
},2000);
this.$once("hook:beforeDestroy", () =>{
clearInterval(timer);
});總結(jié)
到此這篇關(guān)于vue中銷毀定時器的幾種解決方案的文章就介紹到這了,更多相關(guān)vue銷毀定時器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue install 注冊全局組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要介紹了Vue數(shù)據(jù)綁定簡析小結(jié)，本文將從源碼的角度來對Vue響應(yīng)式數(shù)據(jù)中的觀察者模式進(jìn)行簡析。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案
在 Vue 的響應(yīng)式系統(tǒng)中,reactive 對象是一個深度代理,它會追蹤對象屬性的變更,但如果你將整個對象重新賦值,那么 Vue 無法繼續(xù)追蹤新的對象,本文給大家介紹了使用reactive導(dǎo)致數(shù)據(jù)失去響應(yīng)式的原因和解決方案,需要的朋友可以參考下2024-09-09
Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用(適合新手)
在Vue項目中導(dǎo)出Excel表格是常見的功能,特別是在后臺管理系統(tǒng)中,為了方便用戶將大量數(shù)據(jù)保存為本地文件,這篇文章主要給大家介紹了關(guān)于Vue3如何利用xlsx、xlsx-js-style導(dǎo)出Excel表格使用的相關(guān)資料,需要的朋友可以參考下2024-06-06
Vue3使用axios請求攔截器和vuex設(shè)置全局loading方式
本文介紹了如何在Vue.js項目中實現(xiàn)全局loading加載動畫,并通過axios攔截器控制loading的顯示與隱藏2025-12-12
vue router下的html5 history在iis服務(wù)器上的設(shè)置方法
這篇文章主要介紹了vue router下的html5 history在iis服務(wù)器上的設(shè)置方法，需要的朋友參考下吧2017-10-10
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)物流時間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要介紹了Vue el-table 默認(rèn)展開某一行的實例，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue3實現(xiàn)手機上可拖拽元素的組件，用vue3實現(xiàn)一個可在手機上拖拽元素的組件，可拖拽至任意位置，并且可以防止拖拽元素移出屏幕邊緣2022-09-09
這篇文章主要為大家介紹了React DOM diff 對比Vue DOM diff 區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09