清除定时器和 vue 中遇到的定时器setTimeout setInterval问题

2019-03更新

找到了更简单的方法，以setinterval为例，各位自行参考

mounted() {const that = thisconst 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>

转载于:https://www.cnblogs.com/ximiximi-blog/p/7199576.html

清除定时器和 vue 中遇到的定时器setTimeout setInterval问题相关推荐

vue 中定时器的使用全解
1.vue使用定时器在vue中使用定时器,很多情况下,进入和退出vue界面,都没有清除定时器,从而导致有很多定时器一起工作,这样肯定是不行的,接下来就使用当用户进入界面时启用定时器,当用户离开当前界 ...
vue中clearInterval()清除定时器报timeout.close is not a function错误？
在vue中实现播放音乐时旋转光碟的功能时候使用到了定时器,在暂停播放音乐的时候清除定时器,但是发现报了一个奇怪的错误: 在网上查了一下,发现报错的原因好像是vue中有自己内置的clearInterva ...
关于vue中如何清除定时器的方法
一.问题 1.在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继 ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue中如何设置和清除定时器setInterval
data中生明定时器方法里使用和清除定时器
vue中通过定时器设置倒计时，5秒倒计时
前言:有时候,在项目中,我们经常需要设置简单的倒计时功能,这个可以通过定时器来实现. 一.设置div显示倒计时数字 <div class="countCircle">& ...
解决在JS中阻止定时器“重复”开启问题、Vue中定时器的使用
1.问题描述在一些需求开发中.需要设定软件提供服务的时间段(营业时间).这时可以选择定时器来实现.可以选择让定时器每隔一段时间检测当前时间是否在服务时间.到达服务时间.进入服务状态.未到服务时间.进 ...
Vue中使用定时器和随机数
Vue中使用定时器和随机数,程序示例如下: <!DOCTYPE html> <html lang="en"> <head><meta ch ...
vue中页面缓存后destroyed失效，如何关闭定时器
场景页面中设置了定时器,如果组件销毁是没有关闭定时器,他还会一直执行,会非常耗性能,所以需要及时关闭定时器. 关闭定时器 vue项目中,正常情况下,我们在生命周期 destroyed 中关闭即可,一 ...

清除定时器和 vue 中遇到的定时器setTimeout setInterval问题

清除定时器和 vue 中遇到的定时器setTimeout setInterval问题相关推荐

最新文章

热门文章

清除定时器 和 vue 中遇到的定时器setTimeout setInterval问题

清除定时器 和 vue 中遇到的定时器setTimeout setInterval问题相关推荐

最新文章

热门文章

清除定时器和 vue 中遇到的定时器setTimeout setInterval问题

清除定时器和 vue 中遇到的定时器setTimeout setInterval问题相关推荐