vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決
更新時(shí)間：2023年06月29日 09:10:38 作者：啃代碼的毛毛蟲
這篇文章主要介紹了vue?beforeDestroy?clearInterval清除定時(shí)器失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
vue beforeDestroy clearInterval清除定時(shí)器失效
我發(fā)現(xiàn)遇到這個(gè)問題的人挺多的，自己遇到過，改別人代碼的時(shí)候也遇到過，趕緊記下來~這方法好使~
情景
路由跳轉(zhuǎn)時(shí)觸發(fā)了beforeDestroy，里面也寫了清除計(jì)時(shí)器的相關(guān)代碼，但是到其他頁面時(shí)還是在一直執(zhí)行。
// 父組件 某條件觸發(fā)路由跳轉(zhuǎn)，定時(shí)器在/xxx中一直調(diào)用
router.push('/xxx')
// 子組件
mounted() {
this.timer = setInterval(()=>{
this.heartbeat();
},5000);
},
beforeDestroy(){
// 頁面離開時(shí)斷開連接,清除定時(shí)器
console.log( '------------' );
clearInterval(this.timer);
},解決方法
使用程序化的事件偵聽器，試試這個(gè)：
mounted: function () {
var timer = setInterval(()=>{
this.heartbeat();
},5000);
// 通過 $once 來監(jiān)聽定時(shí)器，在 beforeDestroy 鉤子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})
}vue中切換頁面清除定時(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)文章
Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問題(小結(jié))
這篇文章主要介紹了Nuxt升級(jí)2.0.0時(shí)出現(xiàn)的問題(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了 詳解在vue使用weixin-js-sdk常見使用方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
本篇文章給大家分享了vue移動(dòng)端路由切換實(shí)例以及相關(guān)知識(shí)點(diǎn)，對(duì)此有興趣的朋友可以參考學(xué)習(xí)下。2018-05-05
這篇文章主要介紹了詳解如何用VUE寫一個(gè)多用模態(tài)框組件模版，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Vue Components 數(shù)字鍵盤的實(shí)現(xiàn)
這篇文章主要介紹了Vue Components 數(shù)字鍵盤的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能
這篇文章主要介紹了vue點(diǎn)擊按鈕動(dòng)態(tài)創(chuàng)建與刪除組件功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-12-12
解決ele ui 表格表頭太長問題的實(shí)現(xiàn)
這篇文章主要介紹了解決ele ui 表格表頭太長問題的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Vue 框架之鍵盤事件、健值修飾符、雙向數(shù)據(jù)綁定
這篇文章主要介紹了Vue 框架之鍵盤事件、健值修飾符、雙向數(shù)據(jù)綁定問題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
Vue使用Tinymce富文本自定義toolbar按鈕的實(shí)踐
本文主要介紹了Vue使用Tinymce富文本自定義toolbar按鈕，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-12-12
這篇文章主要介紹了vue項(xiàng)目中icon亂碼的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12