vue优雅的清除定时器

今日跟朋友交流，偶然间被问到这个问题：“在vue的生命周期中定义一个定时器，如何在destoryed钩子中不手动卸载的操作下，自动卸载定时器“ 引发了一些思考，也总结出一些之前未接触的代码操作，付诸君一哂

// vue中常见的定义定时器销毁操作如下
export default {...mounted(){this.timer = setTimeout(()=>{//一些操作},1000)}，beforeDestroy(){clearTimeout(this.timer)}
}

现在介绍一下更加优雅的写法

export default {...mounted(){let timer = setTimeout(()=>{//一些操作},1000)this.$once('hook:beforeDestroy',()=>{clearTimeout(timer)timer = null})}
}

注意在有keep-alive包裹的组件中不会执行destroy相关的钩子，所以在deactived钩子中清除

export default {...mounted(){let timer = setTimeout(()=>{//一些操作},1000)this.$on('hook:actived',()=>{ //使用$on,需要多次执行if(timer){clearTimeout(timer)}else{timer = setTimeout(()=>{//一些操作},1000)}timer = null})this.$on('hook:deactived',()=>{ //使用$on,需要多次执行clearTimeout(timer)timer = null})}
}

vue优雅的清除定时器相关推荐

vue中clearInterval()清除定时器报timeout.close is not a function错误？
在vue中实现播放音乐时旋转光碟的功能时候使用到了定时器,在暂停播放音乐的时候清除定时器,但是发现报了一个奇怪的错误: 在网上查了一下,发现报错的原因好像是vue中有自己内置的clearInterva ...
VUE设置和清除定时器
方法一.在生命周期函数beforeDestroy中清除 data() {return {timer: null;}; }, created() { // 设置定时器,5s执行一次this.timer ...
关于vue中如何清除定时器的方法
一.问题 1.在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继 ...
vue项目中清除定时器（清除定时器不成功）
首先确认< router-view >外层是否有包裹了一层< keep-alive > 如果有包裹: <template><div><keep-a ...
vue beforeDestroy clearInterval清除定时器失效
我发现遇到这个问题的人挺多的,自己遇到过,改别人代码的时候也遇到过,赶紧记下来~这方法好使~ 情景:路由跳转时触发了beforeDestroy,里面也写了清除计时器的相关代码,但是到其他页面时还是在一 ...
清除定时器和 vue 中遇到的定时器setTimeout setInterval问题
2019-03更新找到了更简单的方法,以setinterval为例,各位自行参考 mounted() {const that = thisconst timer = setInterval(func ...
vue中定时器一般用法，定时器函数传参以及清除定时器
一.vue中定时器一般用法(举个例子) 显示当前时间, setInterval()方法会每秒执行一次函数,类似手表功能: <template><div class="use ...
vue 由 clearTimeout无法清除定时器引发的vue 周期函数，事件代码执行顺序思考
vue 由 clearTimeout无法清除定时器引发的vue 周期函数,事件代码执行顺序思考最近做个移动的项目,遇到需求:首页无操作20秒,自动退出登录.其他页面20秒无操作,自动跳转首页. 所谓 ...
vue中如何设置和清除定时器setInterval
data中生明定时器方法里使用和清除定时器

vue优雅的清除定时器

vue优雅的清除定时器相关推荐

最新文章

热门文章