在Vue的大型單頁(yè)應(yīng)用中，在某個(gè)路由下，經(jīng)常會(huì)出現(xiàn)需要延遲執(zhí)行（setTimeout)或者間隔之心（setInterval）的函數(shù)，但是每次在頁(yè)面destroy之前，都必須手動(dòng)清理掉。

正常代碼如下：

beforeDestroy() { this._timer && clearTimeout(this._timer);}

但是如果一不小心，就會(huì)忘記，會(huì)造成意想不到的情況，那么有什么辦法能避免這種情況嗎？

當(dāng)然有，那就是重新寫(xiě)一個(gè)setTimeout的方法（或者干脆劫持window.setTimeout)。

var _pageTimer = []; Vue.prototype.setTimeout = (fn, time) => { let handler = window.setTimeout(fn, time); _pageTimer.push(handler); return handler;}

在路由層面，當(dāng)每次頁(yè)面變更時(shí)，執(zhí)行清理工作：

router.beforeEach((to, from, next) => { _pageTimer.map(handler => { window.clearTimeout(handler); }) })

再頁(yè)面使用時(shí)，調(diào)用Vue的setTimeout，這樣是不是方便多了呢？ setInterval也是一樣的。

該方法還適用于對(duì)于頁(yè)面異步請(qǐng)求的ajax處理，可以通過(guò)獲取ajax的handler，在切面切換時(shí)，調(diào)用handler.abort() 取消請(qǐng)求，避免對(duì)服務(wù)器資源的不必要的壓力。

補(bǔ)充知識(shí)：在vue中使用 setTimeout ,退出頁(yè)面后,計(jì)時(shí)器沒(méi)有銷(xiāo)毀

問(wèn)題：頁(yè)面在使用 setTimeout 定時(shí)循環(huán)某方法，或者在兩個(gè)頁(yè)面之間跳轉(zhuǎn)時(shí)間小于定時(shí)器的時(shí)間間隔時(shí)，定時(shí)器還在運(yùn)行。

原因:當(dāng)我們刷新頁(yè)面時(shí)，會(huì)將當(dāng)前頁(yè)面之前創(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)銷(xiāo)毀案例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持好吧啦網(wǎng)。