vue清除定时器的方法是什么?哪些要注意?
Admin 2021-09-07 群英技术资�
vue清除定时器的方法是什么?一些朋友可能不知道为什么要清楚定时器,这是因为定时器如果不及时合理地清除,会造成业务逻辑混乱甚至应用卡死的情况,因此这篇文章就给大家分享关于vue清除定时器的方法及要注意的问题�
清除定时器,相信有相当一部分人是这么写的�
export default { data() { reurn { timer: null } }, mounted() { this.timer = setInterval(() => { console.log('setInterval') }, 2000) }, beforeDestroy() { clearInterval(this.timer) } }
这是一段常见的代码,至少我身边的好几个小伙伴(1-3年经验的都有)都是这么写的,这里存在3个不优雅的问题:
直接上代码:
export default { data() { reurn { } }, mounted() { let timer = setInterval(() => { console.log('setInterval') }, 2000) this.$once('hook:beforeDestroy', () => { clearInterval(timer) timer = null }) } }
这里使用 hook 监听 beforeDestroy 生命周期,这� timer 只需被定义在生命周期里,以上的问题就全部解决了�
在后台系统中,我们常常会设置页面缓存,而当路由� keep-alive 缓存时是不走 beforeDestroy 生命周期的,所以有些小伙伴以为� beforeDestroy 清除定时器就完事了,甚至都没有检查一下,实际上定时器并没有被清除掉。知道了原因也就好解决了,借助 activated � deactivated 这两个生钩子�
export default { data() { reurn { } }, mounted() { let timer = setInterval(() => { console.log('setInterval') }, 2000) this.$on('hook:activated', () => { if (timer === null) { // 避免重复开启定时器 timer = setInterval(() => { console.log('setInterval') }, 2000) } }) this.$on('hook:deactivated', () => { clearInterval(timer) timer = null }) } }
这里需要注意一下,由于缓存原因,所以需要用 $on 而不� $once,不然执行一次后就不会再触发了�
以上就是关于vue实现清除定时器的方法介绍,上述示例具有一定的借鉴价值,有需要的朋友可以参考学习,希望对大家有帮助,想要了解更多可以继续浏览群英网络其他相关的文章�
文本转载自脚本之�
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:[email protected]进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容�
猜你喜欢
这篇文章主要为大家详细介绍了微信小程序自定义Dialog弹框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一�
JavaScript增加p元素的方法:1、使用“document.createElement("p")”语句创建一个新的p元素节点�2、使用“父节点.appendChild(p元素节点)”语句将新创建的p节点添加到指定父节点中�
之前介绍了http模块的请求与响应的过程,也介绍了TCP协议的客户端与服务端的数据传输,http协议是TCP上层协议。这里创建了一个简单的web服务器,并对提交表单数据进行处理,根据了不起的Node.js一书总结。POST方法提交表单数据之前也总结过,向服务器提交数据需要使用POST方法,GET方法的请求信息都在查询字符串中,没有请求体,而POST方法的传输的数据都在请求体中,故提交表单�
本文实例为大家分享了JS实现表格隔行变色的具体代码,供大家参考,具体内容如下
这篇文章主要给大家分享vuex中Getter用法的内容,小编觉得挺实用的,因此分享给大家做个参考,感兴趣的朋友可以参考一下,希望大家阅读完这篇文章能有所收获,下面我们一起来学习一下吧�
成为群英会员,开启智能安全云计算之旅
立即注册Copyright © QY Network Company Ltd. All Rights Reserved. 2003-2020 群英 版权所�
增值电信经营许可证 : B1.B2-20140078