温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

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

发布时间:2020-11-04 16:47:58 来源:亿速云 阅读:1934 作者:Leah 栏目:开发技术

这篇文章运用简单易懂的例子给大家介绍使用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如何实现自动销毁就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI