在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() 取消请求,避免对服务器资源的不必要的压力。
所有评论(0)