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 相关文章推荐
文本框回车提交与禁止提交示例
Sep 27 Javascript
将json当数据库一样操作的javascript lib
Oct 28 Javascript
JS实现控制表格单元格垂直对齐的方法
Mar 30 Javascript
jQuery遍历DOM的父级元素、子级元素和同级元素的方法总结
Jul 07 Javascript
canvas实现钟表效果
Feb 13 Javascript
js实现扫雷小程序的示例代码
Sep 27 Javascript
浅谈react 同构之样式直出
Nov 07 Javascript
javaScript之split与join的区别(详解)
Nov 08 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
Nuxt配置Element-UI按需引入的操作方法
Jul 06 Javascript
JavaScript实现前端倒计时效果
Feb 09 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中strpos、strstr和stripos、stristr函数分析
2016/06/11 PHP
详谈配置phpstorm完美支持Codeigniter(CI)代码自动完成(代码提示)
2017/04/07 PHP
PHP图片水印类的封装
2017/07/06 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
原生js实现手风琴功能(支持横纵向调用)
2017/01/13 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
vue2实现数据请求显示loading图
2017/11/28 Javascript
JS实现数组深拷贝的方法分析
2019/03/06 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
vuex vue简单使用知识点总结
2019/08/29 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
利用原生JS实现欢乐水果机小游戏
2020/04/23 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
2020/10/30 Javascript
Python3基础之条件与循环控制实例解析
2014/08/13 Python
简单介绍Python中用于求最小值的min()方法
2015/05/15 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python 3.7.0 下pillow安装方法
2018/08/27 Python
Python3.5字符串常用操作实例详解
2019/05/01 Python
python中比较两个列表的实例方法
2019/07/04 Python
windows10 pycharm下安装pyltp库和加载模型实现语义角色标注的示例代码
2020/05/07 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
可以使用抽象函数重写基类中的虚函数吗
2013/06/02 面试题
学前教育教师求职自荐信
2013/09/22 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
2015年感恩父亲节演讲稿
2015/03/19 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
法院执行局工作总结
2015/08/11 职场文书
如何用python清洗文件中的数据
2021/06/18 Python