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 相关文章推荐
JS格式化数字保留两位小数点示例代码
Oct 15 Javascript
Document.location.href和.replace的区别示例介绍
Mar 04 Javascript
原生js实现淘宝首页点击按钮缓慢回到顶部效果
Apr 06 Javascript
jQuery中change事件用法实例
Dec 26 Javascript
javascript中键盘事件用法实例分析
Jan 30 Javascript
JavaScript中的getDay()方法使用详解
Jun 09 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
详解微信第三方小程序代开发
Jun 23 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
AngularJS表单验证功能
Oct 19 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 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/03 冲泡冲煮
笑谈配置,使用Smarty技术
2007/01/04 PHP
PHP5中虚函数的实现方法分享
2011/04/20 PHP
phpstudy默认不支持64位php的解决方法
2017/02/20 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
PHP有序表查找之插值查找算法示例
2018/02/10 PHP
CI框架网页缓存简单用法分析
2018/12/26 PHP
javascript setAttribute, getAttribute 在不同浏览器上的不同表现
2010/08/05 Javascript
window.onresize 多次触发的解决方法
2013/11/08 Javascript
php is_numberic函数造成的SQL注入漏洞
2014/03/10 Javascript
nodejs中使用多线程编程的方法实例
2015/03/24 NodeJs
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
使用EVAL处理jqchart jquery 折线图返回数据无效的解决办法
2015/11/26 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Vue.js表单控件实践
2016/10/27 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
js生成word中图片处理方法
2018/01/06 Javascript
node 版本切换的实现
2020/02/02 Javascript
python定时器使用示例分享
2014/02/16 Python
Python cookbook(数据结构与算法)字典相关计算问题示例
2018/02/18 Python
Python中typing模块与类型注解的使用方法
2019/08/05 Python
Python:slice与indices的用法
2019/11/25 Python
django序列化serializers过程解析
2019/12/14 Python
python request 模块详细介绍
2020/11/10 Python
中国宠物用品商城:E宠商城
2016/08/27 全球购物
唤醒头发毛囊的秘密武器:Grow Gorgeous
2016/08/28 全球购物
廉政教育心得体会
2014/01/01 职场文书
年会活动策划方案
2014/01/23 职场文书
汽车队司机先进事迹材料
2014/02/01 职场文书
《猫》教学反思
2014/02/26 职场文书
七一党日活动总结
2014/07/08 职场文书
远程培训的心得体会
2014/09/01 职场文书
2015年幼师个人工作总结
2015/10/15 职场文书
Python如何识别银行卡卡号?
2021/06/10 Python
Java数组详细介绍及相关工具类
2022/04/14 Java/Android