VUE中setTimeout和setInterval自动销毁

最新推荐文章于 2025-06-15 23:16:35 发布

weixin_33852020

最新推荐文章于 2025-06-15 23:16:35 发布

阅读量4.7k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c3744156fb9a049ec6b4766

本文介绍了一种在Vue项目中有效管理定时器(setTimeout和setInterval)的方法，通过重写Vue原型上的setTimeout函数，并利用路由守卫清理定时器，避免内存泄漏。同时，文章提及了如何在页面切换时取消异步请求，减轻服务器压力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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