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 相关文章推荐
Ext javascript建立超链接,进行事件处理的实现方法
Mar 22 Javascript
JavaScript 高级篇之闭包、模拟类,继承(五)
Apr 07 Javascript
javascript改变position值实现菜单滚动至顶部后固定
Jan 18 Javascript
Javascript中 关于prototype属性实现继承的原理图
Apr 16 Javascript
使用JavaScript进行进制转换将字符串转换为十进制
Sep 21 Javascript
jquery控制表单输入框显示默认值的方法
May 22 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 Javascript
js实现瀑布流的三种方式比较
Jun 28 Javascript
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
AngularJs分页插件使用详解
Jun 30 Javascript
uniapp 仿微信的右边下拉选择弹出框的实现代码
Jul 12 Javascript
vue单元格多列合并的实现
Nov 26 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
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
2013/04/26 Javascript
用jquery写的菜单从左往右滑动出现
2014/04/11 Javascript
使用正则表达式的格式化与高亮显示json字符串
2014/12/03 Javascript
JavaScript的Date()方法使用详解
2015/06/09 Javascript
jquery性能优化高级技巧
2015/08/24 Javascript
基于JQuery实现图片轮播效果(焦点图)
2016/02/02 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
Bootstrap每天必学之模态框(Modal)插件
2016/04/26 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
jQuery删除当前节点元素
2016/12/07 Javascript
JS实现数组的增删改查操作示例
2018/08/29 Javascript
原生JS+HTML5实现的可调节写字板功能示例
2018/08/30 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
微信小程序中如何使用flyio封装网络请求
2019/07/03 Javascript
vue(2.x,3.0)配置跨域代理
2019/11/27 Javascript
Openlayers绘制聚合标注
2020/09/28 Javascript
对Python新手编程过程中如何规避一些常见问题的建议
2015/04/01 Python
使用Python实现跳一跳自动跳跃功能
2019/07/10 Python
在Python中append以及extend返回None的例子
2019/07/20 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
如何实现一个python函数装饰器(Decorator)
2020/10/12 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
HTML5新增的8类INPUT输入类型介绍
2015/07/06 HTML / CSS
美国体育用品商店:Paragon Sports
2017/10/08 全球购物
Made in Design英国:设计家具、照明、家庭装饰和花园家具
2019/09/24 全球购物
泰国国际航空公司官网:Thai Airways International
2019/12/04 全球购物
GWebs公司笔试题
2012/05/04 面试题
师范毕业生求职自荐信
2013/09/25 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
聘任书的写作格式及范文
2014/03/29 职场文书
2015年大学生社会实践评语
2015/03/26 职场文书
停水通知
2015/04/16 职场文书
民间借贷纠纷答辩状
2015/08/03 职场文书
小学生作文写作技巧100例,非常实用!
2019/07/08 职场文书
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫