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实现的一个图片滚动切换
Jun 21 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
JavaScript中数组添加值和访问值常见问题
Feb 06 Javascript
搞定immutable.js详细说明
May 02 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
EasyUI Combobox设置默认值 获取text的方法
Nov 28 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
Sep 05 Javascript
Vue页面切换和a链接的本质区别详解
Nov 12 Javascript
JS实现判断移动端PC端功能
Feb 21 Javascript
js实现无缝轮播图
Mar 09 Javascript
浅谈Vuex的this.$store.commit和在Vue项目中引用公共方法
Jul 24 Javascript
JavaScript数组常用的增删改查与其他属性详解
Oct 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
随时给自己贴的图片加文字的php水印
2007/03/16 PHP
PHP中绘制图像的一些函数总结
2014/11/19 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
原生JS实现Ajax通过POST方式与PHP进行交互的方法示例
2018/05/12 PHP
nodejs实用示例 缩址还原
2010/12/28 NodeJs
JavaScript 布尔操作符解析  && || !
2012/08/10 Javascript
js弹出层(jQuery插件形式附带reLoad功能)
2013/04/12 Javascript
JS中的prototype与面向对象的实例讲解
2013/05/22 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
详解处理bootstrap4不支持远程静态框问题
2018/07/20 Javascript
在react中使用vuex的示例代码
2018/07/30 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
Vue-cli3多页面配置详解
2020/03/22 Javascript
Node.js API详解之 assert模块用法实例分析
2020/05/26 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
Element Dropdown下拉菜单的使用方法
2020/07/26 Javascript
Vue中的nextTick作用和几个简单的使用场景
2021/01/25 Vue.js
Python入门篇之对象类型
2014/10/17 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
在python中使用正则表达式查找可嵌套字符串组
2017/10/24 Python
解决Django一个表单对应多个按钮的问题
2019/07/18 Python
Python实现RGB与HSI颜色空间的互换方式
2019/11/27 Python
Pandas的数据过滤实现
2021/01/15 Python
全球精选男装和家居用品:Article
2020/04/13 全球购物
C++的几个面试题附答案
2016/08/03 面试题
军校本科大学生自我评价
2014/01/14 职场文书
《口技》教学反思
2014/02/21 职场文书
提拔干部考察材料
2014/05/26 职场文书
推普周国旗下讲话稿
2014/09/21 职场文书
来探秘“德国中小企业”的成功之道
2019/07/26 职场文书
python实现三次密码验证的示例
2021/04/29 Python
idea编译器vue缩进报错问题场景分析
2021/07/04 Vue.js
详解Alibaba Java诊断工具Arthas查看Dubbo动态代理类
2022/04/08 Java/Android
postgresql中如何执行sql文件
2023/05/08 PostgreSQL