VUE设置和清除定时器

方法一、在生命周期函数beforeDestroy中清除

data() {return {timer: null;};
},
created() {    // 设置定时器，5s执行一次this.timer = setInterval(() => {console.log('setInterval');}, 5000);
}
beforeDestroy () {//清除定时器clearInterval(this.timer);this.timer = null;
}

方法二、使用hook:beforedestroy（推荐）

created() {    // 设置定时器，5s执行一次let timer = setInterval(() => {console.log('setInterval');}, 5000);// 离开当前页面时销毁定时器this.$once('hook:beforeDestroy', () => {clearInterval(timer);timer = null;})
}

该方法与在生命周期钩子beforeDestroy中清除定时器的操作原理一样，但更有优势

1.无需在vue实例上定义定时器，减少不必要的内存浪费

2.设置和清除定时器的代码放在一块，可读性维护性更好

三、beforeDestroy函数没有触发的情况

1、原因

<router-view>外层包裹了一层<keep-alive>

< keep-alive > 有缓存的作用，可以使被包裹的组件状态维持不变，当路由被 keep-alive 缓存时不走 beforeDestroy 生命周期。被包含在 < keep-alive > 中创建的组件，会多出两个生命周期钩子: activated 与 deactivated。

activated
在组件被激活时调用，在组件第一次渲染时也会被调用，之后每次keep-alive激活时被调用。

deactivated
在组件失活时调用。

2、解决方案

借助 activated 和 deactivated 钩子来设置和清除定时器

(1)生命周期钩子

created() {// 页面激活时设置定时器this.$on("hook:activated", () => {let timer = setInterval(()=>{console.log("setInterval");},1000)})// 页面失活时清除定时器this.$on("hook:deactivated", ()=>{clearInterval(timer);timer = null;})}

(2)hook

data() {return {timer: null // 定时器}
},
activated() {// 页面激活时开启定时器this.timer = setInterval(() => {console.log('setInterval');}, 5000)
},
deactivated() {// 页面关闭（路由跳转）时清除定时器clearInterval(this.timer)this.timer = null
},

VUE设置和清除定时器相关推荐

vue中如何设置和清除定时器setInterval
data中生明定时器方法里使用和清除定时器
关于vue中如何清除定时器的方法
一.问题 1.在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继 ...
vue中clearInterval()清除定时器报timeout.close is not a function错误？
在vue中实现播放音乐时旋转光碟的功能时候使用到了定时器,在暂停播放音乐的时候清除定时器,但是发现报了一个奇怪的错误: 在网上查了一下,发现报错的原因好像是vue中有自己内置的clearInterva ...
vue项目中清除定时器（清除定时器不成功）
首先确认< router-view >外层是否有包裹了一层< keep-alive > 如果有包裹: <template><div><keep-a ...
vue beforeDestroy clearInterval清除定时器失效
我发现遇到这个问题的人挺多的,自己遇到过,改别人代码的时候也遇到过,赶紧记下来~这方法好使~ 情景:路由跳转时触发了beforeDestroy,里面也写了清除计时器的相关代码,但是到其他页面时还是在一 ...
vue优雅的清除定时器
今日跟朋友交流,偶然间被问到这个问题:"在vue的生命周期中定义一个定时器,如何在destoryed钩子中不手动卸载的操作下,自动卸载定时器" 引发了一些思考,也总结出一些之前未接 ...
vue设置定时器、清除定时器
1.一次性定时器setTimeout let timer = setTimeout(() => {//需要定时执行的代码console.debug("Hello World" ...
清除定时器和 vue 中遇到的定时器setTimeout setInterval问题
2019-03更新找到了更简单的方法,以setinterval为例,各位自行参考 mounted() {const that = thisconst timer = setInterval(func ...
JS 设置定时器和清除定时器
在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧. 一.启用定时器 window对象提供了两个方法来实 ...

VUE设置和清除定时器

方法一、在生命周期函数beforeDestroy中清除

方法二、使用hook:beforedestroy（推荐）

三、beforeDestroy函数没有触发的情况

VUE设置和清除定时器相关推荐

最新文章

热门文章