正文
清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
2019-03更新
找到了更简单的方法，以setinterval为例，各位自行参考
mounted() {
const that = this
const timer = setInterval(function () {
//这里是想轮循的部分
}
}, 4000) // 4000ms = 4s
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer) // 此处的timer即 上文const的 timer
})
}
建议使用这个方法。后文可忽略
--------------VUE项目中遇到一个问题。a.vue 文件中触发setTimeout后，使用按钮跳转至其他页面，快速返回至a.vue页面后 发现定时器仍然在走。
例子：a.vue代码
window.setTimeout(function(){
window.location.href = "/serverMonitor?t="+ new Date().getTime();
}，5000）
解决办法：
window.setTimeout(function(){
if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁
return;
}
window.location.href = "/serverMonitor?t="+ new Date().getTime();
}，5000）
--------------清除定时器
定时器一般有两个
1、setTimeout();//n毫秒后执行一次
2、setInterval();//每隔n毫秒执行一次
setTimeout()对应的是 clearTimeout(funName);
setInterval()对应的是 clearInterval(funName);
<script>
var funName1 = setTimeout(function(){
return ;
},1000); var funName2 = setInterval(function(){
return fun2;
},1000) //清除Timeout的定时器,传入id(创建定时器时会返回一个id)
clearTimeout(funName1 ); //清除Interval的定时器,传入id(创建定时器时会返回一个id)
clearInterval(funName2 );
//也可以使用return值 来清除
setTimeout(function(){
console.log("33");
return 33;
},3000);
clearTimeout(33);
1
</script>
清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题的更多相关文章- vue中使用定时器时this指向
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
- 关于js中两种定时器的设置及清除
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- 关于js中两种定时器的设置及清除（转载）
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
- vue中使用定时器时this指向问题
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
- js中setTimeout/setInterval定时器用法示例
js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...
- python 全栈开发，Day52(关于DOM操作的相关案例,JS中的面向对象,定时器,BOM,client、offset、scroll系列)
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
- vue中setTimeout切换浏览器页签时怎么清除解决方案
大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...
- iOS中几种定时器
在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. iOS中定时器NSTimer的使用 1.初始化 + (NSTimer ...
- spring项目中如何添加定时器以及在定时器中自动生成sprng注入对象
最近做了一个java的项目,部门领导给了一套代码让我尽快掌握,说心里话本人真心不喜欢java的这种项目方式,各种配置各种xml文件简直头都大了,下面就将我遇到的其中一个我认为是坑的地方整理出来,希望能 ...
随机推荐- MIT 6.828 JOS学习笔记5. Exercise 1.3
Lab 1 Exercise 3 设置一个断点在地址0x7c00处,这是boot sector被加载的位置.然后让程序继续运行直到这个断点.跟踪/boot/boot.S文件的每一条指令,同时使用boo ...
- wikioi 2573 大顶堆与小顶堆并用
题目描写叙述 Description 我们使用黑匣子的一个简单模型.它能存放一个整数序列和一个特别的变量i.在初始时刻.黑匣子为空且i等于0. 这个黑匣子能运行一系列的命令.有两类命令: ADD(x) ...
- tp28xx port pin (open-drain )and (push-pull) 和open collector）
具有开漏(OD)输出的器件是指内部输出和地之间有个N沟道的MOSFET(T1),这些器件可以用于电平转换的应用.输出电压由Vcc'决定.Vcc'可以大于输入高电平电压VCC(up-translate) ...
- java web+模板
这次测试需要在java web的基础上套入模板,在测试的过程中我遇到了许多问题,现在我可以使用模板来美化网页的许多格式.但是模板的许多代码我还是看不懂,其中有jquery的许多代码.在今后我会学习相关 ...
- NFS无法启动解决方式
今天一台挂载nfs磁盘的服务器出现异常,数据不能写入,执行 df -h 卡住不动. 登录nfs server查看发现nfs为启动. [root@server10-13 web]# exportfs [ ...
- IntelliJ IDEA tomcat 热部署
1.点击idea中tomcat设置 2.点击Deployment查看Deploy at the server startup 中tomcat运行的包是 xxxx:war 还是其他,如果是xxx:war ...
- ilspy反编译
资料: http://www.cnblogs.com/JamesLi2015/archive/2011/09/08/2170519.html 软件: http://ilspy.net/
- 如何简单区分Web前后端与MVC
MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...
- Web图形开发
Web项目开发过程中要找到完美的图形解决方案比较困难,只能根据自己的需要,选择自己最合适的画图方案. Web图表一般有以下几种做法: (1)使用客户端控件技术 (2)使用服务器端生成图片 (3)使用富 ...
- Dinic算法----最大流常用算法之一
——没有什么是一个BFS或一个DFS解决不了的:如果有,那就两个一起. 最大流的$EK$算法虽然简单,但时间复杂度是$O(nm^2)$,在竞赛中不太常用. 竞赛中常用的$Dinic$算法和$SAP$, ...
箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue; 普通函数中的this指向是变化的(使用函数时的指向),谁调用的指向谁. 箭头函数: let timerOne = s ...
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
1.JS中的定时器有两种: window.setTimeout([function],[interval]) 设置一个定时器,并且设定了一个等待的时间[interval],当到达时间后,执行对应的方法 ...
在写一个很小的demo时,用的普通函数写法,没有用es6箭头函数,发现this变化了,后来查找到了问题所在: 箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue 普通函数中的 ...
js中setTimeout(定时执行一次)和setInterval(间隔循环执行)用法介绍. setTimeout:在指定的毫秒数后调用指定的代码段或函数:setTimeout示例代码 functio ...
昨日作业讲解: 京东购物车 京东购物车效果: 实现原理: 用2个盒子,就可以完整效果. 先让上面的小盒子向下移动1px,此时就出现了压盖效果.小盒子设置z-index压盖大盒子,将小盒子的下边框去掉, ...
大家都知道,vue中有完整的生命周期,this.$router.push('')可以跳到相应的页面中,在beforeDestroy中可以监听到,将定时器清空,又或是通过this._isDestroye ...
在软件开发过程中,我们常常需要在某个时间后执行某个方法,或者是按照某个周期一直执行某个方法.在这个时候,我们就需要用到定时器. iOS中定时器NSTimer的使用 1.初始化 + (NSTimer ...
最近做了一个java的项目,部门领导给了一套代码让我尽快掌握,说心里话本人真心不喜欢java的这种项目方式,各种配置各种xml文件简直头都大了,下面就将我遇到的其中一个我认为是坑的地方整理出来,希望能 ...
- MIT 6.828 JOS学习笔记5. Exercise 1.3
Lab 1 Exercise 3 设置一个断点在地址0x7c00处,这是boot sector被加载的位置.然后让程序继续运行直到这个断点.跟踪/boot/boot.S文件的每一条指令,同时使用boo ...
- wikioi 2573 大顶堆与小顶堆并用
题目描写叙述 Description 我们使用黑匣子的一个简单模型.它能存放一个整数序列和一个特别的变量i.在初始时刻.黑匣子为空且i等于0. 这个黑匣子能运行一系列的命令.有两类命令: ADD(x) ...
- tp28xx port pin (open-drain )and (push-pull) 和open collector）
具有开漏(OD)输出的器件是指内部输出和地之间有个N沟道的MOSFET(T1),这些器件可以用于电平转换的应用.输出电压由Vcc'决定.Vcc'可以大于输入高电平电压VCC(up-translate) ...
- java web+模板
这次测试需要在java web的基础上套入模板,在测试的过程中我遇到了许多问题,现在我可以使用模板来美化网页的许多格式.但是模板的许多代码我还是看不懂,其中有jquery的许多代码.在今后我会学习相关 ...
- NFS无法启动解决方式
今天一台挂载nfs磁盘的服务器出现异常,数据不能写入,执行 df -h 卡住不动. 登录nfs server查看发现nfs为启动. [root@server10-13 web]# exportfs [ ...
- IntelliJ IDEA tomcat 热部署
1.点击idea中tomcat设置 2.点击Deployment查看Deploy at the server startup 中tomcat运行的包是 xxxx:war 还是其他,如果是xxx:war ...
- ilspy反编译
资料: http://www.cnblogs.com/JamesLi2015/archive/2011/09/08/2170519.html 软件: http://ilspy.net/
- 如何简单区分Web前后端与MVC
MVC是开发所有软件所必须涉及的基本几个划分 M主要负责数据与模型,V主要负责显示C主要负责交互与业务所以不管是前端还是后端,都是有MVC的.MVC是一个对于软件简单的抽象,不管是M还是V,还是C都是 ...
- Web图形开发
Web项目开发过程中要找到完美的图形解决方案比较困难,只能根据自己的需要,选择自己最合适的画图方案. Web图表一般有以下几种做法: (1)使用客户端控件技术 (2)使用服务器端生成图片 (3)使用富 ...
- Dinic算法----最大流常用算法之一
——没有什么是一个BFS或一个DFS解决不了的:如果有,那就两个一起. 最大流的$EK$算法虽然简单,但时间复杂度是$O(nm^2)$,在竞赛中不太常用. 竞赛中常用的$Dinic$算法和$SAP$, ...
