VUE中setTimeout和setInterval自動銷燬

elvisxiao發表於2019-01-10
Vue

在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() 取消請求，避免對伺服器資源的不必要的壓力。

相關文章