VUE中setTimeout和setInterval自动销毁案例


Posted in Javascript onSeptember 07, 2020

在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中setTimeout和setInterval自动销毁案例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
JavaScript设计模式初探
Jan 07 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
解决element-ui中下拉菜单子选项click事件不触发的问题
Aug 22 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
Sep 13 Javascript
浅谈vuex actions和mutation的异曲同工
Dec 13 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
node获取客户端ip功能简单示例
Aug 24 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 Javascript
js实现打字小游戏
Dec 17 Javascript
vue a标签点击实现赋值方式
Sep 07 #Javascript
JavaScript实现多球运动效果
Sep 07 #Javascript
JavaScript实现世界各地时间显示
Sep 07 #Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 #Javascript
vue中element 的upload组件发送请求给后端操作
Sep 07 #Javascript
vue-simple-uploader上传成功之后的response获取代码
Sep 07 #Javascript
Vue.js暴露方法给WebView的使用操作
Sep 07 #Javascript
You might like
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php提交过来的数据生成为txt文件
2016/04/28 PHP
PHP call_user_func和call_user_func_array函数的简单理解与应用分析
2019/11/25 PHP
js自带函数备忘 数组
2006/12/29 Javascript
麻雀虽小五脏俱全 Dojo自定义控件应用
2010/09/04 Javascript
javascript 主动派发事件总结
2011/08/09 Javascript
不使用XMLHttpRequest实现异步加载 Iframe和script
2012/10/29 Javascript
JQuery实现简单的服务器轮询效果实例
2016/03/31 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
微信小程序 限制1M的瘦身技巧与方法详解
2017/01/06 Javascript
Bootstrap进度条实现代码解析
2017/03/07 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
2020/03/27 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
微信小程序 调用远程接口 给全局数组赋值代码实例
2019/08/13 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
jQuery实现带进度条的轮播图
2020/09/13 jQuery
Openlayers显示地理位置坐标的方法
2020/09/28 Javascript
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
你真的了解Python的random模块吗?
2017/12/12 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
收藏!10个免费高清视频素材网站!【设计、视频剪辑必备】
2021/03/18 杂记
CSS3实现的文本3D效果附图
2014/09/03 HTML / CSS
css3 盒模型以及box-sizing属性全面了解
2016/09/20 HTML / CSS
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
《小小竹排画中游》教学反思
2014/02/26 职场文书
元宵节主持词
2014/03/25 职场文书
纪检监察建议书
2014/05/19 职场文书
出租房屋协议书
2014/09/14 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
幼儿园六一主持词开场白
2015/05/28 职场文书
时尚女魔头观后感
2015/06/04 职场文书
Windows Server 2012配置DNS服务器的方法
2022/04/29 Servers
Spring boot实现上传文件到本地服务器
2022/08/14 Java/Android