清除定时器 和 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中阻止定时器“重复”开启问题、Vue中定时器的使用
1.问题描述 在一些需求开发中.需要设定软件提供服务的时间段(营业时间).这时可以选择定时器来实现.可以选择让定时器每隔一段时间检测当前时间是否在服务时间.到达服务时间.进入服务状态.未到服务时间.进 ...
- 关于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 ...
随机推荐
- 使用ajax向后台发送数据
第一种最原始的方式就是手动拼接json数组: var name="text"; $.ajax({ url:"". data:{'name':name} succ ...
- git中设置代理
说明:在某种原因下,整个网络都是使用代理的情况下,需要使用git clone,这时就需要设置代理了. 在没有设置代理的时候,直接克隆报错 Failed to connect to gitee.com ...
- 重新认识urllib
# coding=utf-8 # urllib_get_file=urllib.request.urlretrieve(url=None,filename="test.zip") ...
- 十分钟理解JavaScript引擎的执行机制
关注专栏写文章 十分钟理解JavaScript引擎的执行机制 方伟景 千锋前端开发推动市场提升的学习研究者. 4 人赞同了该文章 首先,请牢记2点: JS是单线程语言 JS的Event Loop是JS ...
- 在sql server中如何检测一个字符串中是否包含另一个字符串
select CHARINDEX('456','123456') SQL语句使用CHARINDEX函数,来测试一个字符串中是否包含另一个字符串中的方法: 一.CHARINDEX函数介绍 1.函数功 ...
- vector,list不是模板
vector和list在命名空间std里,还需要添加声明 using namespace std; 或者 std::list 也可以.
- 解决PHP Redis扩展无法加载的问题
最近在工作中需要使用PHP访问Redis,从https://github.com/phpredis/phpredis下载了phpredis,并且按照官方的说明进行了安装 phpize ./config ...
- s 贪心
区间问题: 区间选点问题 右端点排序,now标记点. 数轴上有N个闭区间[Ai, Bi].取尽量少的点,使得每个区间内都至少有一个点(不同区间内含的点可以是同一个). 输入 第1行:一个整数N(1 ...
- 1、spring与springmvc父子容器
转载于http://www.tianshouzhi.com/api/tutorials/spring 1.0 spring与springmvc父子容器 1.spring和springmvc父子容器概念 ...
- html5 标准文档结构
<!DOCTYPE html> <html lang="zh-cmn-Hans"> <head> <meta charset=" ...