VUE中setTimeout和setInterval自動(dòng)銷毀案例
在Vue的大型單頁應(yīng)用中,在某個(gè)路由下,經(jīng)常會(huì)出現(xiàn)需要延遲執(zhí)行(setTimeout)或者間隔之心(setInterval)的函數(shù),但是每次在頁面destroy之前,都必須手動(dòng)清理掉。
正常代碼如下:
beforeDestroy() { this._timer && clearTimeout(this._timer);}
但是如果一不小心,就會(huì)忘記,會(huì)造成意想不到的情況,那么有什么辦法能避免這種情況嗎?
當(dāng)然有,那就是重新寫一個(gè)setTimeout的方法(或者干脆劫持window.setTimeout)。
var _pageTimer = []; Vue.prototype.setTimeout = (fn, time) => { let handler = window.setTimeout(fn, time); _pageTimer.push(handler); return handler;}
在路由層面,當(dāng)每次頁面變更時(shí),執(zhí)行清理工作:
router.beforeEach((to, from, next) => { _pageTimer.map(handler => { window.clearTimeout(handler); }) })
再頁面使用時(shí),調(diào)用Vue的setTimeout,這樣是不是方便多了呢? setInterval也是一樣的。
該方法還適用于對于頁面異步請求的ajax處理,可以通過獲取ajax的handler,在切面切換時(shí),調(diào)用handler.abort() 取消請求,避免對服務(wù)器資源的不必要的壓力。
補(bǔ)充知識:在vue中使用 setTimeout ,退出頁面后,計(jì)時(shí)器沒有銷毀
問題:頁面在使用 setTimeout 定時(shí)循環(huán)某方法,或者在兩個(gè)頁面之間跳轉(zhuǎn)時(shí)間小于定時(shí)器的時(shí)間間隔時(shí),定時(shí)器還在運(yùn)行。
原因:當(dāng)我們刷新頁面時(shí),會(huì)將當(dāng)前頁面之前創(chuàng)建的 setTimeout 以及其他定時(shí)器都清除掉,但是僅僅是路由切換是不會(huì)清除的。
data (){ return{ clearTime: ’’ }},mounted () { randomGet () { // 在 1分鐘到 2分鐘之間 不定時(shí)執(zhí)行 var r = Math.random() * (2 - 1) + 1 var t = Math.ceil(r * 60000) // console.log(t) this.clearTime = setTimeout(() => { this.submit() this.randomGet() }, t) }, submit () { console.log(’aaaa’) }},destroyed () { clearTimeout(this.clearTime) // 清除}
以上這篇VUE中setTimeout和setInterval自動(dòng)銷毀案例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)2. XHTML 1.0:標(biāo)記新的開端3. HTML5 Canvas繪制圖形從入門到精通4. XML解析錯(cuò)誤:未組織好 的解決辦法5. ASP基礎(chǔ)知識VBScript基本元素講解6. asp(vbscript)中自定義函數(shù)的默認(rèn)參數(shù)實(shí)現(xiàn)代碼7. 詳解CSS偽元素的妙用單標(biāo)簽之美8. 利用CSS3新特性創(chuàng)建透明邊框三角9. 使用Spry輕松將XML數(shù)據(jù)顯示到HTML頁的方法10. XML入門的常見問題(四)
