VUE中使用的setInterval与setTimeout如何实现自动销毁

但是如果一不小心,就会忘记,会造成意想不到的情况,那么有什么办法能避免这种情况吗?

当然有,那就是重新写一个setTimeout的方法(或者干脆劫持window.setTimeout)。

 var _pageTimer=[];
　　Vue.prototype。setTimeout=(fn、时间)=比;{
　　让窗口处理程序=etTimeout (fn、时间);
　　_pageTimer.push(处理器);
　　
　　返回处理程序;
　　}

在路由层面,当每次页面变更时,执行清理工作:

路由器。beforeEach(下),从=比;{_pageTimer。地图(处理程序=比;{window.clearTimeout(处理器);}})

再页面使用时,调用Vue的setTimeout,这样是不是方便多了呢? setInterval也是一样的。

该方法还适用于对于页面异步请求的ajax处理,可以通过获取ajax的处理程序,在切面切换时,调用handler.abort()取消请求,避免对服务器资源的不必要的压力。

<强>在Vue中使用setTimeout,退出页面后,计时器没有销毁

问题:页面在使用setTimeout定时循环某方法,或者在两个页面之间跳转时间小于定时器的时间间隔时,定时器还在运行。

原因:当我们刷新页面时,会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。

 data () {
　　返回{
　　clearTime: & # 39; & # 39;
　　}
　　},
　　安装(){
　　randomGet () {//在1分钟到2分钟之间不定时执行
　　var r=math . random () * (2 - 1) + 1
　　var t=数学。装天花板(r * 60000)//console.log (t)
　　这一点。clearTime=setTimeout(()=比;{
　　this.submit ()
　　this.randomGet ()
　　},t)
　　},
　　提交(){
　　console.log (& # 39; aaaa级# 39;)
　　}
　　},
　　摧毁了(){
　　clearTimeout (this.clearTime)//清除
　　}

关于使用VUE中的setInterval与setTimeout如何实现自动销毁就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看的到。

VUE中使用的setInterval与setTimeout如何实现自动销毁