快捷導(dǎo)航

vue項(xiàng)目中定時(shí)器無法清除的原因解決

更新時(shí)間：2024年02月23日 15:53:05 作者：有蟬

頁面有定時(shí)器,并且定時(shí)器在離開頁面時(shí),有清除,本文主要介紹了vue項(xiàng)目中定時(shí)器無法清除的原因解決,具有一定的參考價(jià)值,感興趣的可以了解一下

當(dāng)前頁面有定時(shí)器，并且定時(shí)器在離開頁面時(shí)，有清除

  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer)

      this.timer = null

    }

  },

原因

當(dāng)前頁面 (假設(shè)當(dāng)前頁面為page1) 的定時(shí)器是在一系列前置請(qǐng)求之后，才觸發(fā)的。【此定時(shí)器前面有一堆請(qǐng)求，等這堆請(qǐng)求完成之后，定時(shí)器才會(huì)被觸發(fā)】

路由切換過快的時(shí)候，切換到了其他頁面（page2,page3...）時(shí)，當(dāng)前頁面（page1）的beforeDestroy函數(shù)已經(jīng)觸發(fā)了，但是當(dāng)前頁面（page1）的定時(shí)器還沒有觸發(fā)。當(dāng)切換到其他頁面（page2,page3...）的時(shí)候，當(dāng)前頁面（page1）的定時(shí)器才執(zhí)行。

此種情況下，定時(shí)器無法清除

解決：執(zhí)行定時(shí)器的時(shí)候，加個(gè)判斷即可

判斷路由是否為當(dāng)前page1的路由名稱。如果是當(dāng)前的路由名稱，才開始執(zhí)行定時(shí)器

假如page1的路由name是【page1】

vue2和vue3思路都是如此

        if (this.$route.name === 'page1') {
          this.timer = setInterval(() => {
              this.getListPage()
          }, 3 * 1000)
        }

補(bǔ)：前端Vue項(xiàng)目中定時(shí)器清除問題

方法1：常規(guī)使用和清除

clearInterval(this.timer)//使用前先清空定時(shí)器
this.timer = setInterval(()=>{
    console.log(1)
}, 1000)

方法2：使用數(shù)組存儲(chǔ)每一個(gè)定時(shí)器的標(biāo)識(shí),避免某些原因?qū)е露〞r(shí)器未能清除 (如：頁面重復(fù)初始化)

if(!window.timer){ window.timer = []}
// 將存起來的定時(shí)器一并清除
window.timer.map(item=>{
    clearInterval(item)
})

const timerId = setInterval(()=>{
    console.log(1)
}, 1000)
window.timer.push(timerId)

到此這篇關(guān)于vue項(xiàng)目中定時(shí)器無法清除的原因解決的文章就介紹到這了,更多相關(guān)vue 定時(shí)器無法清除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue+element樹組件實(shí)現(xiàn)樹懶加載的過程詳解
這篇文章主要介紹了vue+element樹組件實(shí)現(xiàn)樹懶加載的過程，本文通過圖文實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-10-10
vue踩坑之在input中使用filters局部過濾器問題
這篇文章主要介紹了vue踩坑之在input中使用filters局部過濾器問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11
實(shí)例講解v-if和v-show的區(qū)別
今天小編就為大家分享一篇關(guān)于實(shí)例講解v-if和v-show的區(qū)別，小編覺得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來看看吧
2019-01-01
axios中cookie跨域及相關(guān)配置示例詳解
自從入了 Vue 之后，一直在用 axios 這個(gè)庫來做一些異步請(qǐng)求。下面這篇文章主要給大家介紹了關(guān)于axios中cookie跨域及相關(guān)配置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。
2017-12-12
基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖
這篇文章主要為大家詳細(xì)介紹了基于vue2.0實(shí)現(xiàn)簡(jiǎn)單輪播圖，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置）
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù)，并且可以通過拖動(dòng)折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來通過本文給大家分享vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧
2019-04-04
vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組
這篇文章主要介紹了vue 如何將二維數(shù)組轉(zhuǎn)化為一維數(shù)組，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-04-04
Vue內(nèi)存泄漏的識(shí)別和解決方案
Vue是人氣爆棚且地表最強(qiáng)的JS（JavaScript）框架,祂允許我們構(gòu)建動(dòng)態(tài)交互式的Web App,然但是,和任何軟件雷同,Vue App偶爾會(huì)遭遇內(nèi)存泄漏,導(dǎo)致性能暴跌和意外行為,今天,我們將深入Vue App內(nèi)存泄漏的原因,并探討識(shí)別和修復(fù)這些問題的錦囊妙計(jì)
2023-11-11
vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果
這篇文章主要介紹了vue中實(shí)現(xiàn)左右聯(lián)動(dòng)的效果，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2018-06-06
Vue移動(dòng)端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作
這篇文章主要介紹了Vue移動(dòng)端項(xiàng)目實(shí)現(xiàn)使用手機(jī)預(yù)覽調(diào)試操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-07-07