vue setInterval 定时器失效的解决方式


Posted in Javascript onJuly 30, 2020

正常情况下,在data里定义homeSetInterval 保存定时器的ID值 ,在销毁组件是使用clearInterval方法是可行的

vue setInterval 定时器失效的解决方式

但在使用了如下的keep缓存模式在使用销毁模式不行了

vue setInterval 定时器失效的解决方式

应该使用离开路由器前方法beforeRouteLeave

vue setInterval 定时器失效的解决方式

补充知识:vue中使用定时器的坑

我们在使用vue的脚手架去搭建开发环境的时候,在A页面写入一个定时器去定时请求一个接口,但是我们去B页面,C页面的时候都会有这个接口定时请求的现象,那么怎样处理呢?

第一步:

首先我在data函数里面进行定义定时器名称:

data() {      
  return {               
    timer: null // 定时器名称     
  }    
},

第二步:

在要用的方法中使用定时器

this.timer = (() => {
// 某些操作
}, 1000)

第三步:

beforeDestroy()生命周期内清除定时器

beforeDestroy() {
  clearInterval(this.timer);    
  this.timer = null;
  }

以上这篇vue setInterval 定时器失效的解决方式就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 设置元素相对于另一个元素的top值(实例代码)
Nov 06 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
利用js制作html table分页示例(js实现分页)
Apr 25 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
Angularjs 事件指令详细整理
Jul 27 Javascript
Vue封装的可编辑表格插件方法
Aug 28 Javascript
LayUI数据接口返回实体封装的例子
Sep 12 Javascript
layui自己添加图片按钮并点击跳转页面的例子
Sep 14 Javascript
p5.js实现简单货车运动动画
Oct 23 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
May 13 Javascript
浅谈JavaScript节流和防抖函数
Aug 25 Javascript
vue 解决setTimeOut和setInterval函数无效报错的问题
Jul 30 #Javascript
浅谈vue 组件中的setInterval方法和window的不同
Jul 30 #Javascript
详解JavaScript自定义函数
Jul 29 #Javascript
深入了解JavaScript词法作用域
Jul 29 #Javascript
vue监听dom大小改变案例
Jul 29 #Javascript
VUE实时监听元素距离顶部高度的操作
Jul 29 #Javascript
详解JavaScript作用域 闭包
Jul 29 #Javascript
You might like
咖啡店都有些什么常规豆子呢?有什么风味在里面
2021/03/04 咖啡文化
php图像处理函数大全(推荐收藏)
2013/07/11 PHP
美图秀秀web开放平台--PHP流式上传和表单上传示例分享
2014/06/22 PHP
PHP实现通过正则表达式替换回调的内容标签
2015/06/15 PHP
最新版本PHP 7 vs HHVM 多角度比较
2016/02/14 PHP
javascript forEach通用循环遍历方法
2010/10/11 Javascript
js 上传图片预览问题
2010/12/06 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
js 遍历json返回的map内容示例代码
2013/10/29 Javascript
jQuery实现跨域iframe接口方法调用
2015/03/14 Javascript
JS建造者模式基本用法实例分析
2015/06/30 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
Bootstrap风格的zTree右键菜单
2017/02/17 Javascript
jQuery表单验证之密码确认
2017/05/22 jQuery
详解vue跨组件通信的几种方法
2017/06/15 Javascript
微信小程序解析富文本过程详解
2019/07/13 Javascript
layui插件表单验证提交触发提交的例子
2019/09/09 Javascript
Nginx搭建HTTPS服务器和强制使用HTTPS访问的方法
2015/08/16 Python
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
Python探索之修改Python搜索路径
2017/10/25 Python
对Pandas MultiIndex(多重索引)详解
2018/11/16 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
GLAMGLOW格莱魅美国官网:美国知名的面膜品牌
2016/12/31 全球购物
求职推荐信范文
2013/12/01 职场文书
师生聚会感言
2014/01/26 职场文书
职务任命书范本
2014/06/05 职场文书
高三励志标语
2014/06/05 职场文书
质量月口号
2014/06/20 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
超级礼物观后感
2015/06/15 职场文书
应收账款管理制度
2015/08/06 职场文书
2019思想汇报范文
2019/05/21 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
一文搞懂如何实现Go 超时控制
2021/03/30 Python
Python爬虫之自动爬取某车之家各车销售数据
2021/06/02 Python