vue項目中定時器無法清除的原因解決

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

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

當前頁面有定時器，并且定時器在離開頁面時，有清除

  beforeDestroy() {

    if (this.timer) {

      clearInterval(this.timer)

      this.timer = null

    }

  },

原因

當前頁面 (假設當前頁面為page1) 的定時器是在一系列前置請求之后，才觸發(fā)的?！敬硕〞r器前面有一堆請求，等這堆請求完成之后，定時器才會被觸發(fā)】

路由切換過快的時候，切換到了其他頁面（page2,page3...）時，當前頁面（page1）的beforeDestroy函數(shù)已經觸發(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ù)組存儲每一個定時器的標識,避免某些原因導致定時器未能清除 (如：頁面重復初始化)

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

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

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

您可能感興趣的文章:

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