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 相关文章推荐
JavaScript iframe的相互操作浅析
Oct 14 Javascript
js实现幻灯片播放图片示例代码
Nov 07 Javascript
简介可以自动完成UI的AngularJS工具angular-smarty
Jun 23 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
详解vue添加删除元素的方法
Jun 30 Javascript
Vue中的基础过渡动画及实现原理解析
Dec 04 Javascript
Vue 自定义标签的src属性不能使用相对路径的解决
Sep 17 Javascript
微信小程序添加插屏广告并设置显示频率(一天一次)
Dec 06 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
vue实现瀑布流组件滑动加载更多
Mar 10 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开发文件系统实例讲解
2006/10/09 PHP
php中{}大括号是什么意思
2013/12/01 PHP
php生成缩略图示例代码分享(使用gd库实现)
2014/01/20 PHP
laravel实现批量更新多条记录的方法示例
2017/10/22 PHP
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
2010/05/07 Javascript
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
2010/06/02 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
2013/05/13 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
js onclick事件传参讲解
2013/11/06 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
浅谈Javascript如何实现匀速运动
2014/12/19 Javascript
jQuery获取字符串中出现最多的数
2016/02/22 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
jquery+Jscex打造游戏力度条
2020/09/12 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
Bootstrap里的文件分别代表什么意思及其引用方法
2017/05/01 Javascript
使用Bootstrap4 + Vue2实现分页查询的示例代码
2017/12/21 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
NodeJS实现自定义流的方法
2018/08/01 NodeJs
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
python 正则式使用心得
2009/05/07 Python
python正则表达式修复网站文章字体不统一的解决方法
2013/02/21 Python
Python中字典的基础知识归纳小结
2015/08/19 Python
Python之父谈Python的未来形式
2016/07/01 Python
Python多进程multiprocessing用法实例分析
2017/08/18 Python
Python编程实现正则删除命令功能
2017/08/30 Python
Python 模拟购物车的实例讲解
2017/09/11 Python
在python tkinter中Canvas实现进度条显示的方法
2019/06/14 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
优秀党员获奖感言
2014/02/18 职场文书
协议书的格式
2014/04/23 职场文书
安全承诺书格式
2014/05/21 职场文书
资产运营委托书范本
2014/10/16 职场文书
2014年高三班主任工作总结
2014/12/05 职场文书