在Vue的大型單頁應用中，在某個路由下，經常會出現需要延遲執行（setTimeout)或者間隔之心（setInterval）的函數，但是每次在頁面destroy之前，都必須手動清理掉。

正常代碼如下：

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

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

當然有，那就是重新寫一個setTimeout的方法（或者干脆劫持window.setTimeout)。

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

在路由層面，當每次頁面變更時，執行清理工作：

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

再頁面使用時，調用Vue的setTimeout，這樣是不是方便多了呢？ setInterval也是一樣的。

該方法還適用于對于頁面異步請求的ajax處理，可以通過獲取ajax的handler，在切面切換時，調用handler.abort() 取消請求，避免對服務器資源的不必要的壓力。

補充知識：在vue中使用 setTimeout ,退出頁面后,計時器沒有銷毀

問題：頁面在使用 setTimeout 定時循環某方法，或者在兩個頁面之間跳轉時間小于定時器的時間間隔時，定時器還在運行。

原因:當我們刷新頁面時，會將當前頁面之前創建的 setTimeout 以及其他定時器都清除掉,但是僅僅是路由切換是不會清除的。

data (){ return{ clearTime: ’’ }},mounted () { randomGet () { // 在 1分鐘到 2分鐘之間 不定時執行 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自動銷毀案例就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持好吧啦網。