記錄 - 在vue中使用setTimeout,離開(kāi)當(dāng)前路由setTimeout未銷毀的問(wèn)題

Caizhenhao 發(fā)布于2019-08-23 16:50 / 2341人閱讀

摘要：如果在兩個(gè)頁(yè)面之間來(lái)回跳轉(zhuǎn)跳轉(zhuǎn)時(shí)間小于定時(shí)器的間隔時(shí)間時(shí)，也會(huì)出現(xiàn)重復(fù)創(chuàng)建的情況。原因當(dāng)我們刷新頁(yè)面時(shí)，會(huì)將當(dāng)前頁(yè)面之前創(chuàng)建的以及其他定時(shí)器都清除掉但是僅僅是路由切換是不會(huì)清除的。

問(wèn)題:從第一個(gè)頁(yè)面跳轉(zhuǎn)到第二個(gè)頁(yè)面后,如果停留在第二個(gè)頁(yè)面，定時(shí)器還在運(yùn)行。如果在兩個(gè)頁(yè)面之間來(lái)回跳轉(zhuǎn),跳轉(zhuǎn)時(shí)間小于定時(shí)器的間隔時(shí)間時(shí)，也會(huì)出現(xiàn)重復(fù)創(chuàng)建setTimeout的情況。

原因:當(dāng)我們刷新頁(yè)面時(shí)，會(huì)將當(dāng)前頁(yè)面之前創(chuàng)建的setTimeout以及其他定時(shí)器都清除掉,但是僅僅是路由切換是不會(huì)清除的。

解決：具體代碼：`

data () {
    return {
      overtimer: null
    }
}，
methods: {
    stoptime () {
      clearTimeout(this.overtimer);
    }
}，
created () {
    this.overtimer = setTimeout(() => {
        this.$Message.error("讀取卡片超時(shí)");
     }, 10000)
    this.$once("hook:beforeDestroy", () => {            
      clearInterval(this.overtimer);
      this.overtimer = null;
    })
}

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/103366.html

相關(guān)文章

Vue 實(shí)踐過(guò)程中的幾個(gè)問(wèn)題

摘要：前言本篇是我在使用過(guò)程中，遇到的幾個(gè)小問(wèn)題和之前不了解的東西，記錄下來(lái)，希望能夠幫助各位踩坑。小結(jié)上面就是我分享的幾個(gè)小問(wèn)題，希望大家看了能夠有所收獲另明年準(zhǔn)備去上海，如果小伙伴的公司有坑，可以聯(lián)系一下我。前言本篇是我在使用vue過(guò)程中，遇到的幾個(gè)小問(wèn)題和之前不了解的東西，記錄下來(lái)，希望能夠幫助各位踩坑。如果喜歡的話可以點(diǎn)波贊，或者關(guān)注一下，希望本文可以幫到大家。本文首發(fā)于我的個(gè)...

DevTalking 2019-08-22 14:01 評(píng)論0 收藏0
VUE使用中踩過(guò)的坑

摘要：前言如今可謂是一匹黑馬數(shù)已居第一位前端開(kāi)發(fā)對(duì)于的使用已經(jīng)越來(lái)越多，它的優(yōu)點(diǎn)就不做介紹了本篇是我對(duì)使用過(guò)程中以及對(duì)一些社區(qū)朋友提問(wèn)我的問(wèn)題中做的一些總結(jié)幫助大家踩坑。隨后的重新渲染，元素組件及其所有的子節(jié)點(diǎn)將被視為靜態(tài)內(nèi)容并跳過(guò)。前言 vue如今可謂是一匹黑馬,github star數(shù)已居第一位！前端開(kāi)發(fā)對(duì)于vue的使用已經(jīng)越來(lái)越多，它的優(yōu)點(diǎn)就不做介紹了,本篇是我對(duì)vue使用過(guò)程中以及...

big_cat 2019-08-22 14:04 評(píng)論0 收藏0
初學(xué)者可能不知道的vue技巧

摘要：前言大家好，這里是平頭哥聯(lián)盟，我是首席甩鍋官老金，今天給大家分享的，一些日常中神秘而又簡(jiǎn)單的的實(shí)用小技巧，以及我在我司項(xiàng)目中實(shí)用的總結(jié)和坑，跟大家一起分享，希望能給其他攻城獅帶來(lái)些許便利，如有理解錯(cuò)誤，請(qǐng)糾正。 showImg(https://segmentfault.com/img/bVbinVz?w=900&h=396); 前言　　大家好，這里是@IT·平頭哥聯(lián)盟，我是首席甩鍋官...

scola666 2019-08-29 17:01 評(píng)論0 收藏0
初學(xué)者可能不知道的vue技巧

摘要：前言大家好，這里是平頭哥聯(lián)盟，我是首席甩鍋官老金，今天給大家分享的，一些日常中神秘而又簡(jiǎn)單的的實(shí)用小技巧，以及我在我司項(xiàng)目中實(shí)用的總結(jié)和坑，跟大家一起分享，希望能給其他攻城獅帶來(lái)些許便利，如有理解錯(cuò)誤，請(qǐng)糾正。 showImg(https://segmentfault.com/img/bVbinVz?w=900&h=396); 前言　　大家好，這里是@IT·平頭哥聯(lián)盟，我是首席甩鍋官...

Drummor 2019-08-02 11:44 評(píng)論0 收藏0
初學(xué)者可能不知道的vue技巧

摘要：前言大家好，這里是平頭哥聯(lián)盟，我是首席甩鍋官老金，今天給大家分享的，一些日常中神秘而又簡(jiǎn)單的的實(shí)用小技巧，以及我在我司項(xiàng)目中實(shí)用的總結(jié)和坑，跟大家一起分享，希望能給其他攻城獅帶來(lái)些許便利，如有理解錯(cuò)誤，請(qǐng)糾正。 showImg(https://segmentfault.com/img/bVbinVz?w=900&h=396); 前言　　大家好，這里是@IT·平頭哥聯(lián)盟，我是首席甩鍋官...

baoxl 2019-08-23 12:25 評(píng)論0 收藏0