这篇文章运用简单易懂的例子给大家介绍使用VUE中的setInterval与setTimeout如何实现自动销毁，内容非常详细，感兴趣的小伙伴们可以参考借鉴，希望对大家能有所帮助。
在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() 取消请求，避免对服务器资源的不必要的压力。
补充知识：在vue中使用 setTimeout ,退出页面后,计时器没有销毁
问题：页面在使用 setTimeout 定时循环某方法，或者在两个页面之间跳转时间小于定时器的时间间隔时，定时器还在运行。
原因:当我们刷新页面时，会将当前页面之前创建的 setTimeout 以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。
data (){
return{
clearTime: ''
}
},
mounted () {
randomGet () {
// 在 1分钟到 2分钟之间 不定时执行
var r = Math.random() * (2 - 1) + 1
var t = Math.ceil(r * 60000)
// console.log(t)
this.clearTime = setTimeout(() => {
this.submit()
this.randomGet()
}, t)
},
submit () {
console.log('aaaa')
}
},
destroyed () {
clearTimeout(this.clearTime) // 清除
}关于使用VUE中的setInterval与setTimeout如何实现自动销毁就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
