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 getJSON 处理json数据的代码
Jul 26 Javascript
『JavaScript』限制Input只能输入数字实现思路及代码
Apr 22 Javascript
js+css实现增加表单可用性之提示文字
Jun 03 Javascript
JavaScript设置表单上传时文件个数的方法
Aug 11 Javascript
微信小程序 九宫格实例代码
Jan 21 Javascript
微信小程序开发之入门实例教程篇
Mar 07 Javascript
原生js更改css样式的两种方式
Mar 15 Javascript
详解vue+vueRouter+webpack的简单实例
Jun 17 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 Javascript
VuePress 中如何增加用户登录功能
Nov 29 Javascript
js的Object.assign用法示例分析
Mar 05 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代码
2010/08/08 PHP
php获取后台Job管理的实现代码
2011/06/10 PHP
解析MySql与Java的时间类型
2013/06/22 PHP
php判断GIF图片是否为动画的方法
2020/09/04 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
JavaScript 语法集锦 脚本之家基础推荐
2009/11/15 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
ie7+背景透明文字不透明超级简单的实现方法
2014/01/17 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
深入理解AngularJS中的ng-bind-html指令和$sce服务
2016/09/08 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
JavaScript阻止表单提交方法(附代码)
2017/08/15 Javascript
angularJs 表格添加删除修改查询方法
2018/02/27 Javascript
vue在线动态切换主题色方案
2020/03/26 Javascript
原生JS实现天气预报
2020/06/16 Javascript
夯基础之手撕javascript继承详解
2020/11/09 Javascript
Python抓取Discuz!用户名脚本代码
2013/12/30 Python
Django框架多表查询实例分析
2018/07/04 Python
python 3.3 下载固定链接文件并保存的方法
2018/12/18 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
pycharm 批量修改变量名称的方法
2019/08/01 Python
使用python turtle画高达
2020/01/19 Python
python调用API接口实现登陆短信验证
2020/05/10 Python
基于Python脚本实现邮件报警功能
2020/05/20 Python
世界上最大的餐具公司:Oneida
2016/12/17 全球购物
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
优秀毕业生就业推荐信
2014/05/22 职场文书
领导干部廉政自律承诺书
2014/05/26 职场文书
煤矿开采专业求职信
2014/07/08 职场文书
公安交警中队队长个人对照检查材料思想汇报
2014/10/05 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
幼儿园中班教育随笔
2015/08/14 职场文书
tensorflow学习笔记之tfrecord文件的生成与读取
2021/03/31 Python