解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題
直接上代碼,以下
window.setTimeout(function(){ if(this && !this._isDestroyed){ //_isDestroyed 組件是否被銷毀 return; } window.location.href = 'http://www.gepszalag.com/serverMonitor?t='+ new Date().getTime();},5000)
很粗暴的方法,在執(zhí)行之前看是否被銷毀就行,
第二種方法,調(diào)用路由組件內(nèi)的鉤子函數(shù)beforeRouteLeave
beforeRouteLeave(to,from,next){clearTimeout(window.timer);next();}
補充知識:vue銷毀時事件,created和mounted&&activated的區(qū)別
我就廢話不多說了,大家還是直接看代碼吧~
// 關(guān)閉當(dāng)前頁面就會銷毀監(jiān)聽事件(checkpay)destroyed() { clearInterval(this.checkpay)}created()在創(chuàng)建vue對象時,在html渲染之前就觸發(fā);但是注意created()只會觸發(fā)一次; mounted()在html渲染完成之后才會執(zhí)行的; activated()進入當(dāng)前存在activated()函數(shù)的頁面時,一進入頁面就觸發(fā);可用于初始化頁面數(shù)據(jù)等
以上這篇解決vue組件銷毀之后計時器繼續(xù)執(zhí)行的問題就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 使用css實現(xiàn)全兼容tooltip提示框2. CSS代碼檢查工具stylelint的使用方法詳解3. CSS3實例分享之多重背景的實現(xiàn)(Multiple backgrounds)4. Vue3使用JSX的方法實例(筆記自用)5. JavaScript數(shù)據(jù)類型對函數(shù)式編程的影響示例解析6. 詳解CSS偽元素的妙用單標(biāo)簽之美7. Vue3獲取DOM節(jié)點的3種方式實例8. 利用CSS3新特性創(chuàng)建透明邊框三角9. vue實現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細教程10. 不要在HTML中濫用div
