VUE中setTimeout和setInterval自动销毁案例
在Vue的大型单页应用中，在某个路由下，经常会出现需要延迟执行（setTimeout)或者间隔之心（setInterval）的函数，但是每次在页面destroy之前，都必须手动清理掉。
正常代码如下：
beforeDestroy(){
this._timer&&clearTimeout(this._timer);
}
但是如果一不小心，就会忘记，会造成意想不到的情况，那么有什么办法能避免这种情况吗？
当然有，那就是重新写一个setTimeout的方法（或者干脆劫持window.setTimeout)。
var_pageTimer=[];
Vue.prototype.setTimeout=(fn,time)=>{
lethandler=window.setTimeout(fn,time);
_pageTimer.push(handler);
returnhandler;
}
在路由层面，当每次页面变更时，执行清理工作：
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分钟之间不定时执行
varr=Math.random()*(2-1)+1
vart=Math.ceil(r*60000)
//console.log(t)
this.clearTime=setTimeout(()=>{
this.submit()
this.randomGet()
},t)
},
submit(){
console.log('aaaa')
}
},
destroyed(){
clearTimeout(this.clearTime)//清除
}
以上这篇VUE中setTimeout和setInterval自动销毁案例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。