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 相关文章推荐
VBScript版代码高亮
Jun 26 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
JavaScript分页功能的实现方法
Apr 25 Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 Javascript
JS实现的N多简单无缝滚动代码(包含图文效果)
Nov 06 Javascript
原生js实现查询天气小应用
Dec 09 Javascript
利用transition实现文字上下抖动的效果
Jan 21 Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 Javascript
简单的JS控制button颜色随点击更改的实现方法
Apr 17 Javascript
vue自定义过滤器创建和使用方法详解
Nov 06 Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 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
使用TinyButStrong模板引擎来做WEB开发
2007/03/16 PHP
php中几种常见安全设置详解
2010/04/06 PHP
PHP+Ajax实现无刷新分页实例详解(附demo源码下载)
2016/04/07 PHP
nginx下安装php7+php5
2016/07/31 PHP
javascript中获取选中对象的类型
2007/04/02 Javascript
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
Jquery中dialog属性小记
2010/09/03 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
使用focus方法让光标默认停留在INPUT框
2014/07/29 Javascript
js 动态修改css文件的方法
2014/08/05 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
微信小程序实现简单input正则表达式验证功能示例
2017/11/30 Javascript
vue-router的HTML5 History 模式设置
2018/09/08 Javascript
聊聊Vue中provide/inject的应用详解
2019/11/10 Javascript
JavaScript 装逼指南(js另类写法)
2020/05/10 Javascript
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
python Pygame的具体使用讲解
2017/11/03 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
python用户评论标签匹配的解决方法
2018/05/31 Python
python实现五子棋游戏
2019/06/18 Python
Django框架 querySet功能解析
2019/09/04 Python
Django框架models使用group by详解
2020/03/11 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
Pycharm Available Package无法显示/安装包的问题Error Loading Package List解决
2020/09/18 Python
详解如何在css3打包后自动追加前缀插件:autoprefixer
2018/12/18 HTML / CSS
澳大利亚香水在线:Price Rite Mart
2017/12/28 全球购物
酒店前台接待岗位职责
2013/12/03 职场文书
机电一体化求职信
2014/03/10 职场文书
暑假学习心得体会
2014/09/02 职场文书
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
开会迟到检讨书范文
2015/05/06 职场文书
2016年优秀共青团员事迹材料
2016/02/25 职场文书
导游词范文之颐和园/重庆/云台山
2019/09/10 职场文书
浅谈Redis缓冲区机制
2022/06/05 Redis