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里选择超链接的实现代码
May 22 Javascript
19个很有用的 JavaScript库推荐
Jun 27 Javascript
在Javascript中处理数组之toSource()方法的使用
Jun 09 Javascript
Bootstrap每天必学之导航条(二)
Mar 01 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
May 05 Javascript
JavaScript html5 canvas实现图片上画超链接
Oct 20 Javascript
详解VUE 数组更新
Dec 16 Javascript
JS解析后台返回的JSON格式数据实例
Aug 06 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 Javascript
JQuery事件冒泡和默认行为代码实例
May 13 jQuery
vue切换菜单取消未完成接口请求的案例
Nov 13 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
在PHP里得到前天和昨天的日期的代码
2007/08/16 PHP
windows下zendframework项目环境搭建(通过命令行配置)
2012/12/06 PHP
js代码实现微博导航栏
2015/07/30 PHP
实用javaScript技术-屏蔽类
2006/08/15 Javascript
js 判断 enter 事件
2009/02/12 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
浏览器窗口大小变化时使用resize事件对框架不起作用的解决方法
2014/05/11 Javascript
Node.js开发之访问Redis数据库教程
2015/01/14 Javascript
Javascript实现单例模式
2016/01/24 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
2016/03/13 Javascript
利用jquery实现下拉框的禁用与启用
2016/12/07 Javascript
JavaScript DOM节点操作实例小结(新建,删除HTML元素)
2017/01/19 Javascript
js 作用域和变量详解
2017/02/16 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
详谈js中数组(array)和对象(object)的区别
2017/02/27 Javascript
微信小程序“摇一摇”的实例代码
2017/07/20 Javascript
vue params、query传参使用详解
2017/09/12 Javascript
jQuery.Sumoselect插件实现下拉复选框效果
2017/11/09 jQuery
webpack external模块的具体使用
2018/03/10 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
Vue实现多标签选择器
2019/11/28 Javascript
[49:05]Newbee vs TNC 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python3使用urllib示例取googletranslate(谷歌翻译)
2014/01/23 Python
详解Python IO编程
2020/07/24 Python
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
MAC彩妆澳洲官网:M·A·C AU
2021/01/17 全球购物
计算机网络专业个人的自我评价
2013/10/17 职场文书
力学专业毕业生自荐信
2013/11/17 职场文书
机关门卫制度
2014/02/01 职场文书
主管会计岗位责任制
2014/02/10 职场文书
乡镇干部个人整改措施思想汇报
2014/10/10 职场文书
学生个人评语大全
2015/01/04 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
Centos环境下Postgresql 安装配置及环境变量配置技巧
2021/05/18 PostgreSQL
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android