vue項目中定時器無法清除的原因解決
當(dāng)前頁面有定時器，并且定時器在離開頁面時，有清除
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},原因
當(dāng)前頁面 (假設(shè)當(dāng)前頁面為page1) 的定時器是在一系列前置請求之后，才觸發(fā)的?！敬硕〞r器前面有一堆請求，等這堆請求完成之后，定時器才會被觸發(fā)】
路由切換過快的時候，切換到了其他頁面（page2,page3...）時，當(dāng)前頁面（page1）的beforeDestroy函數(shù)已經(jīng)觸發(fā)了，但是當(dāng)前頁面（page1）的定時器還沒有觸發(fā)。當(dāng)切換到其他頁面（page2,page3...）的時候，當(dāng)前頁面（page1）的定時器才執(zhí)行。
此種情況下，定時器無法清除
解決：執(zhí)行定時器的時候，加個判斷即可
判斷路由是否為當(dāng)前page1的路由名稱。如果是當(dāng)前的路由名稱，才開始執(zhí)行定時器
假如page1的路由name是【page1】
vue2和vue3思路都是如此
if (this.$route.name === 'page1') {
this.timer = setInterval(() => {
this.getListPage()
}, 3 * 1000)
}補(bǔ)：前端Vue項目中定時器清除問題
方法1：常規(guī)使用和清除
clearInterval(this.timer)//使用前先清空定時器
this.timer = setInterval(()=>{
console.log(1)
}, 1000)
方法2：使用數(shù)組存儲每一個定時器的標(biāo)識,避免某些原因?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-drag-resize 拖拽縮放插件的使用(簡單示例)
本文通過代碼給大家介紹了Vue-drag-resize 拖拽縮放插件使用簡單示例,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-12-12
這篇文章主要給大家介紹了關(guān)于利用jsx寫vue組件的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編來一起看看吧。2017-07-07
這篇文章主要介紹了vue路由傳參及獲取參數(shù)的方式總結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了在vue中使用Autoprefixed的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-07-07
vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點后兩位,并且不能輸入減號
這篇文章主要介紹了vue如何設(shè)置輸入框只能輸入數(shù)字且只能輸入小數(shù)點后兩位,并且不能輸入減號問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue?子組件傳父組件?$emit更新屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法
Vite在默認(rèn)配置下會將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧2024-09-09
這篇文章主要為大家詳細(xì)介紹了vue集成百度UEditor富文本編輯器的使用教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
在實際業(yè)務(wù)中，我們常用圖表來做數(shù)據(jù)統(tǒng)計，數(shù)據(jù)展示，數(shù)據(jù)可視化等比較直觀的方式來達(dá)到一目了然的數(shù)據(jù)查看，但在大屏開發(fā)過程中，常會因為適配不同屏幕而感到困擾，下面我們來解決一下這個不算難題的難題2022-11-11
這篇文章主要介紹了Vue??控制元素顯示隱藏的方法和區(qū)別,需要的朋友可以參考下2022-12-12