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 innerHTML、outerHTML、innerText、outerText的区别
Nov 24 Javascript
a标签的href与onclick事件的区别详解
Nov 12 Javascript
jQuery中detach()方法用法实例
Dec 25 Javascript
JS实现自适应高度表单文本框的方法
Feb 25 Javascript
jQuery on()方法示例及jquery on()方法的优点
Aug 27 Javascript
每天一篇javascript学习小结(Array数组)
Nov 11 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
Feb 14 Javascript
javascript中JSON.parse()与eval()解析json的区别
May 19 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
浅谈express 中间件机制及实现原理
Aug 31 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
浅谈web上存漏洞及原理分析、防范方法(文件名检测漏洞)
2013/06/29 PHP
Yii框架通过请求组件处理get,post请求的方法分析
2019/09/03 PHP
JavaScript获取GridView中用户点击控件的行号,列号
2009/04/14 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
jquery对象和DOM对象的任意相互转换
2016/02/21 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
Bootstrap php制作动态分页标签
2016/12/23 Javascript
深入理解React中何时使用箭头函数
2017/08/23 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
原生JS实现的跳一跳小游戏完整实例
2019/01/27 Javascript
Vue表单之v-model绑定下拉列表功能
2019/05/14 Javascript
微信小程序开发之map地图组件定位并手动修改位置偏差
2019/08/17 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
python显示天气预报
2014/03/02 Python
python实现SMTP邮件发送功能
2020/06/16 Python
PyTorch实现AlexNet示例
2020/01/14 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
降低python版本的操作方法
2020/09/11 Python
Python 实现PS滤镜的旋涡特效
2020/12/03 Python
python中yield的用法详解
2021/01/13 Python
HTML5中在title标题标签里设置小图标的方法
2020/06/23 HTML / CSS
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
TripAdvisor斯洛伐克:阅读评论、比较价格和酒店预订
2018/04/25 全球购物
技术总监岗位职责
2013/12/05 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
2014年会策划方案
2014/05/11 职场文书
优秀毕业生求职信
2014/06/05 职场文书
幼儿园小班家长评语
2014/12/30 职场文书
2015年检验科工作总结
2015/04/27 职场文书
刑事附带民事上诉状
2015/05/23 职场文书
2016年学校“6﹒26国际禁毒日”宣传活动总结
2016/04/05 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
python脚本框架webpy模板赋值实现
2021/11/20 Python