VUE中setTimeout和setInterval自动销毁

在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() 取消请求，避免对服务器资源的没必要要的压力。