vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決
更新時(shí)間：2023年06月29日 09:10:38 作者：啃代碼的毛毛蟲(chóng)
這篇文章主要介紹了vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue beforeDestroy clearInterval清除定時(shí)器失效
我發(fā)現(xiàn)遇到這個(gè)問(wèn)題的人挺多的，自己遇到過(guò)，改別人代碼的時(shí)候也遇到過(guò)，趕緊記下來(lái)~這方法好使~
情景
路由跳轉(zhuǎn)時(shí)觸發(fā)了beforeDestroy，里面也寫了清除計(jì)時(shí)器的相關(guān)代碼，但是到其他頁(yè)面時(shí)還是在一直執(zhí)行。
// 父組件 某條件觸發(fā)路由跳轉(zhuǎn)，定時(shí)器在/xxx中一直調(diào)用
router.push('/xxx')
// 子組件
mounted() {
this.timer = setInterval(()=>{
this.heartbeat();
},5000);
},
beforeDestroy(){
// 頁(yè)面離開(kāi)時(shí)斷開(kāi)連接,清除定時(shí)器
console.log( '------------' );
clearInterval(this.timer);
},解決方法
使用程序化的事件偵聽(tīng)器，試試這個(gè)：
mounted: function () {
var timer = setInterval(()=>{
this.heartbeat();
},5000);
// 通過(guò) $once 來(lái)監(jiān)聽(tīng)定時(shí)器，在 beforeDestroy 鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
}vue中切換頁(yè)面清除定時(shí)器
data中定義全局變量
intervalFlag: "",
mounted中創(chuàng)建定時(shí)器
5分鐘執(zhí)行一次loadTable方法
?this.intervalFlag = setInterval(() => {
? ? ? this.loadTable();
? ? }, 1000 * 5 * 60);destroyed中清除定時(shí)器
? destroyed () {
? ? //清空定時(shí)任務(wù)
? ? if (this.intervalFlag) {
? ? ? clearTimeout(this.intervalFlag);
? ? ? this.intervalFlag = null;
? ? }
? ? var lastTimeoutId = setTimeout(";");
? ? for (var i = 0; i <= lastTimeoutId._id; i++) {
? ? ? clearTimeout(i);
? ? }
? },總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
讓多個(gè)組件使用同一個(gè)掛載點(diǎn)，并動(dòng)態(tài)切換，這就是動(dòng)態(tài)組件。這篇文章主要介紹了Vue動(dòng)態(tài)組件 ,需要的朋友可以參考下2017-08-08
這篇文章主要介紹了代碼詳解Vuejs響應(yīng)式原理的基礎(chǔ)知識(shí)，有興趣的朋友們參考學(xué)習(xí)下吧。2017-12-12
這篇文章主要介紹了vue.js購(gòu)物車添加商品組件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09
vue使用echarts時(shí)created里拿到的數(shù)據(jù)無(wú)法渲染的解決
這篇文章主要介紹了vue使用echarts時(shí)created里拿到的數(shù)據(jù)無(wú)法渲染的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法
這篇文章主要介紹了在Vue中實(shí)現(xiàn)回車鍵切換焦點(diǎn)的方法，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-02-02
這篇文章主要介紹了詳解Vue.js3.0 組件是如何渲染為DOM的 ，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)
這篇文章主要介紹了Antd下拉選擇,自動(dòng)匹配功能的實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-10-10
離線搭建vue環(huán)境運(yùn)行項(xiàng)目詳細(xì)步驟
由于公司要求在內(nèi)網(wǎng)開(kāi)發(fā)項(xiàng)目,而內(nèi)網(wǎng)不能連接外網(wǎng),因此只能離線安裝vue環(huán)境,下面這篇文章主要給大家介紹了關(guān)于離線搭建vue環(huán)境運(yùn)行項(xiàng)目的詳細(xì)步驟,需要的朋友可以參考下2023-11-11
element el-tooltip動(dòng)態(tài)顯示隱藏(有省略號(hào)顯示,沒(méi)有省略號(hào)不顯示)
本文主要介紹了element el-tooltip動(dòng)態(tài)顯示隱藏,主要實(shí)現(xiàn)有省略號(hào)顯示,沒(méi)有省略號(hào)不顯示,具有一定的參考價(jià)值,感興趣的可以了解一下2023-09-09
詳解vue 自定義marquee無(wú)縫滾動(dòng)組件
這篇文章主要介紹了vue自定義marquee無(wú)縫滾動(dòng)組件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04