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 相关文章推荐
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
jQueryUI如何自定义组件实现代码
Nov 14 Javascript
JS性能优化笔记搜索整理
Aug 21 Javascript
深入探寻javascript定时器
Jan 02 Javascript
原生javascript实现分享到朋友圈功能 支持ios和android
May 11 Javascript
封装的dialog插件 基于bootstrap模态对话框的简单扩展
Aug 10 Javascript
javascript事件捕获机制【深入分析IE和DOM中的事件模型】
Dec 15 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
JS实现区分中英文并统计字符个数的方法示例
Jun 09 Javascript
Vue CLI 3.x 自动部署项目至服务器的方法
Apr 02 Javascript
jQuery HTML css()方法与css类实例详解
May 20 jQuery
vue实现图片按比例缩放问题操作
Aug 11 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默认安装产生系统漏洞
2006/10/09 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
最准确的php截取字符串长度函数
2015/10/29 PHP
PHP中的数组处理函数实例总结
2016/01/09 PHP
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
动态创建Angular组件实现popup弹窗功能
2017/09/15 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
JavaScript实现一个带AI的井字棋游戏源码
2018/05/21 Javascript
webpack4.x打包过程详解
2018/07/18 Javascript
NodeJS搭建HTTP服务器的实现步骤
2018/10/12 NodeJs
详解微信小程序的不同函数调用的几种方法
2019/05/08 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
带你使用webpack快速构建web项目的方法
2020/11/12 Javascript
[06:07]辉夜杯现场观众互动 “比谁远送显示器”
2015/12/26 DOTA
[02:19]DOTA2上海特级锦标赛 观赛指南 Spectator Guide
2016/02/04 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
[46:12]完美世界DOTA2联赛循环赛 DM vs Matador BO2第一场 11.04
2020/11/04 DOTA
Python实现从URL地址提取文件名的方法
2015/05/15 Python
Python装饰器原理与简单用法实例分析
2018/04/29 Python
Python3之简单搭建自带服务器的实例讲解
2018/06/04 Python
python字符串和常用数据结构知识总结
2019/05/21 Python
Python使用正则实现计算字符串算式
2019/12/29 Python
matplotlib基础绘图命令之bar的使用方法
2020/08/13 Python
如果有两个类A,B,怎么样才能使A在发生一个事件的时候通知B
2016/03/12 面试题
市场营销专业推荐信
2013/11/03 职场文书
免职证明样本
2014/10/23 职场文书
2015年仓管员工作总结
2015/04/21 职场文书
企业安全生产检查制度
2015/08/06 职场文书
中学音乐课教学反思
2016/02/18 职场文书
通知怎么写?
2019/04/17 职场文书
Golang表示枚举类型的详细讲解
2021/09/04 Golang
Python必备技巧之字符数据操作详解
2022/03/23 Python