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