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 相关文章推荐
从jQuery.camelCase()学习string.replace() 函数学习
Sep 13 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
javascript 拷贝节点cloneNode()使用介绍
Apr 03 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
Nov 18 Javascript
JSON创建键值对(key是中文或者数字)方式详解
Aug 24 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
Sep 18 Javascript
vue 优化CDN加速的方法示例
Sep 19 Javascript
分享一个vue项目“脚手架”项目的实现步骤
May 26 Javascript
Vue中通过Vue.extend动态创建实例的方法
Aug 13 Javascript
js+cavans实现图片滑块验证
Sep 29 Javascript
Vue Elenent实现表格相同数据列合并
Nov 30 Vue.js
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中最容易忘记的一些知识点总结
2013/04/28 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
PHP中func_get_args(),func_get_arg(),func_num_args()的区别
2013/09/30 PHP
CI框架验证码CAPTCHA辅助函数用法实例
2014/11/05 PHP
php绘制一个矩形的方法
2015/01/24 PHP
Eclipse PHPEclipse 配置的具体步骤
2017/08/08 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
基于jquery实现点击左右按钮图片横向滚动
2013/04/11 Javascript
jQuery学习笔记之 Ajax操作篇(一) - 数据加载
2014/06/23 Javascript
使用jQuery仿苹果官网焦点图特效
2014/12/23 Javascript
jquery插件uploadify多图上传功能实现代码
2016/08/12 Javascript
基于jQuery实现滚动刷新效果
2017/01/09 Javascript
微信小程序中使用Promise进行异步流程处理的实例详解
2017/08/17 Javascript
JavaScript数据结构之双向链表定义与使用方法示例
2017/10/27 Javascript
react redux入门示例
2018/04/19 Javascript
Element-UI踩坑之Pagination组件的使用
2018/10/29 Javascript
jQuery zTree如何改变指定节点文本样式
2020/10/16 jQuery
vue-cli3自动消除console.log()的调试信息方式
2020/10/21 Javascript
python中zip和unzip数据的方法
2015/05/27 Python
通过数据库向Django模型添加字段的示例
2015/07/21 Python
Python科学计算之NumPy入门教程
2017/01/15 Python
Python编程之变量赋值操作实例分析
2017/07/24 Python
python利用rsa库做公钥解密的方法教程
2017/12/10 Python
Python类的继承和多态代码详解
2017/12/27 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python数据预处理 :数据共线性处理详解
2020/02/24 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
单位创先争优活动方案
2014/01/26 职场文书
爱国主义影片观后感
2015/06/18 职场文书
2015年治庸问责工作总结
2015/07/27 职场文书
如何用python插入独创性声明
2021/03/31 Python
Promise面试题详解之控制并发
2021/05/14 面试题
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记