vue項目中定時器無法清除的原因解決
更新時間：2024年02月23日 15:53:05 作者：有蟬
頁面有定時器,并且定時器在離開頁面時,有清除,本文主要介紹了vue項目中定時器無法清除的原因解決,具有一定的參考價值,感興趣的可以了解一下
當前頁面有定時器，并且定時器在離開頁面時，有清除
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},原因
當前頁面 (假設(shè)當前頁面為page1) 的定時器是在一系列前置請求之后，才觸發(fā)的。【此定時器前面有一堆請求，等這堆請求完成之后，定時器才會被觸發(fā)】
路由切換過快的時候，切換到了其他頁面（page2,page3...）時，當前頁面（page1）的beforeDestroy函數(shù)已經(jīng)觸發(fā)了，但是當前頁面（page1）的定時器還沒有觸發(fā)。當切換到其他頁面（page2,page3...）的時候，當前頁面（page1）的定時器才執(zhí)行。
此種情況下，定時器無法清除
解決：執(zhí)行定時器的時候，加個判斷即可
判斷路由是否為當前page1的路由名稱。如果是當前的路由名稱，才開始執(zhí)行定時器
假如page1的路由name是【page1】
vue2和vue3思路都是如此
if (this.$route.name === 'page1') {
this.timer = setInterval(() => {
this.getListPage()
}, 3 * 1000)
}補：前端Vue項目中定時器清除問題
方法1：常規(guī)使用和清除
clearInterval(this.timer)//使用前先清空定時器
this.timer = setInterval(()=>{
console.log(1)
}, 1000)
方法2：使用數(shù)組存儲每一個定時器的標識,避免某些原因?qū)е露〞r器未能清除 (如：頁面重復(fù)初始化)
if(!window.timer){ window.timer = []}
// 將存起來的定時器一并清除
window.timer.map(item=>{
clearInterval(item)
})
const timerId = setInterval(()=>{
console.log(1)
}, 1000)
window.timer.push(timerId)到此這篇關(guān)于vue項目中定時器無法清除的原因解決的文章就介紹到這了,更多相關(guān)vue 定時器無法清除內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+element樹組件 實現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件 實現(xiàn)樹懶加載的過程，本文通過圖文實例代碼相結(jié)合給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-10-10
這篇文章主要介紹了vue踩坑之在input中使用filters局部過濾器問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
今天小編就為大家分享一篇關(guān)于實例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01
自從入了 Vue 之后，一直在用 axios 這個庫來做一些異步請求。下面這篇文章主要給大家介紹了關(guān)于axios中cookie跨域及相關(guān)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。2017-12-12
這篇文章主要為大家詳細介紹了基于vue2.0實現(xiàn)簡單輪播圖，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設(shè)置）
制作一個折線圖用于顯示當前24小時的數(shù)據(jù)，并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實現(xiàn)可拖動節(jié)點的折線圖（支持拖動方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04
vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
Vue是人氣爆棚且地表最強的JS（JavaScript）框架,祂允許我們構(gòu)建動態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會遭遇內(nèi)存泄漏,導(dǎo)致性能暴跌和意外行為,今天,我們將深入Vue App內(nèi)存泄漏的原因,并探討識別和修復(fù)這些問題的錦囊妙計2023-11-11
這篇文章主要介紹了vue中實現(xiàn)左右聯(lián)動的效果，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2018-06-06
Vue移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作
這篇文章主要介紹了Vue移動端項目實現(xiàn)使用手機預(yù)覽調(diào)試操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07