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 继承详解(二)
Jul 13 Javascript
一个挺有意思的Javascript小问题说明
Sep 26 Javascript
JS的replace方法介绍
Oct 20 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
原生javascript实现DIV拖拽并计算重复面积
Jan 02 Javascript
JS实现页面进入和返回定位到具体位置
Dec 08 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
微信小程序支付前端源码
Aug 29 Javascript
详解从0开始搭建微信小程序(前后端)的全过程
Apr 15 Javascript
layui switch 开关监听 弹出确定状态转换的例子
Sep 21 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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利用cookie实现访问次数统计代码
2011/05/19 PHP
PHP提取字符串中的图片地址[正则表达式]
2011/11/12 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
使用composer 安装 laravel框架的方法图文详解
2019/08/02 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
每个程序员都需要学习 JavaScript 的7个理由小结
2016/09/03 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
JS弹性运动实现方法分析
2016/12/15 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
2017/01/26 Javascript
用move.js库实现百叶窗特效
2017/02/08 Javascript
基于JavaScript实现复选框的全选和取消全选
2017/02/09 Javascript
vue.js移动端tab组件的封装实践实例
2017/06/30 Javascript
get  post jsonp三种数据交互形式实例详解
2017/08/25 Javascript
小程序采集录音并上传到后台
2019/11/22 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
Nuxt的动态路由和参数校验操作
2020/11/09 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
[43:32]Winstrike vs VGJ.S 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
python使用PyFetion来发送短信的例子
2014/04/22 Python
python绘制双Y轴折线图以及单Y轴双变量柱状图的实例
2019/07/08 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Python读取ini配置文件传参的简单示例
2021/01/05 Python
使用CSS3创建动态菜单效果
2015/07/10 HTML / CSS
编写html5时调试发现脚本php等网页js、css等失效
2013/12/31 HTML / CSS
Mio Skincare中文官网:肌肤和身体护理
2016/10/26 全球购物
马来西亚演唱会订票网站:StubHub马来西亚
2018/10/18 全球购物
AP澳洲中文网:澳洲正品直邮,包税收件无忧
2019/07/12 全球购物
英国最大的独立玩具专卖店:The Entertainer
2019/09/06 全球购物
党员大会主持词
2014/04/02 职场文书
合伙协议书
2014/04/23 职场文书
个人工作表现自我评价
2015/03/06 职场文书
SQL中的连接查询详解
2022/06/21 SQL Server
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python