在Vue的大型單頁應用中,在某個路由下,常常會出現須要延遲執行(setTimeout)或者間隔之心(setInterval)的函數,可是每次在頁面destroy以前,都必須手動清理掉。正常代碼以下:ajax
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也是同樣的。this
該方法還適用於對於頁面異步請求的ajax處理,能夠經過獲取ajax的handler,在切面切換時,調用handler.abort() 取消請求,避免對服務器資源的沒必要要的壓力。spa