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