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 相关文章推荐
JavaScript事件列表解说
Dec 22 Javascript
js类中获取外部函数名的方法与代码
Sep 12 Javascript
jQuery 连续列表实现代码
Dec 21 Javascript
动态添加option及createElement使用示例
Jan 26 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
Dec 05 Javascript
Node.js的包详细介绍
Jan 14 Javascript
jQuery实现页面滚动时动态加载内容的方法
Mar 20 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
Node.js使用orm2进行update操作时关联字段无法修改的解决方法
Jun 13 Javascript
详解vue的diff算法原理
May 20 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
Apr 01 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 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
MYSQL环境变量设置方法
2007/01/15 PHP
PHP strtotime函数详解
2009/12/18 PHP
完美解决在ThinkPHP控制器中命名空间的问题
2017/05/05 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
PHP实现的权重算法示例【可用于游戏根据权限来随机物品】
2019/02/15 PHP
YII2框架中查询生成器Query()的使用方法示例
2020/03/18 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
javascript 显示当前系统时间代码
2009/12/28 Javascript
jQuery结合Json提交数据到Webservice,并接收从Webservice返回的Json数据
2011/02/18 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
JavaScript异步回调的Promise模式封装实例
2014/06/07 Javascript
JS交换变量的方法
2015/01/21 Javascript
js点击选择文本的方法
2015/02/09 Javascript
JS前端加密算法示例
2016/12/22 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
Vue实现开心消消乐游戏算法
2019/10/22 Javascript
vue项目中使用bpmn-自定义platter的示例代码
2020/05/11 Javascript
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
wxPython定时器wx.Timer简单应用实例
2015/06/03 Python
python字符串中的单双引
2017/02/16 Python
Caffe均值文件mean.binaryproto转mean.npy的方法
2018/07/09 Python
详解python 注释、变量、类型
2018/08/10 Python
PyCharm无法引用自身项目解决方式
2020/02/12 Python
TensorBoard 计算图的可视化实现
2020/02/15 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Django实现随机图形验证码的示例
2020/10/15 Python
英国折扣零售连锁店:QD Stores
2018/12/08 全球购物
高中英语演讲稿范文
2014/04/24 职场文书
营销总经理岗位职责范本
2014/09/02 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
2016年大学生暑期社会实践活动总结
2016/04/06 职场文书
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
2021/05/27 Python
Python 发送SMTP邮件的简单教程
2021/06/24 Python