vue setInterval 定时器失效的解决方式
更新时间：2020年07月30日 09:14:15 作者：T-wave
这篇文章主要介绍了vue setInterval 定时器失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
正常情况下，在data里定义homeSetInterval 保存定时器的ID值 ，在销毁组件是使用clearInterval方法是可行的
但在使用了如下的keep缓存模式在使用销毁模式不行了
应该使用离开路由器前方法beforeRouteLeave
补充知识：vue中使用定时器的坑
我们在使用vue的脚手架去搭建开发环境的时候，在A页面写入一个定时器去定时请求一个接口，但是我们去B页面，C页面的时候都会有这个接口定时请求的现象，那么怎样处理呢？
第一步：
首先我在data函数里面进行定义定时器名称：
data() {
return {
timer: null // 定时器名称
}
},
第二步：
在要用的方法中使用定时器
this.timer = (() => {
// 某些操作
}, 1000)
第三步：
beforeDestroy()生命周期内清除定时器
beforeDestroy() {
clearInterval(this.timer);
this.timer = null;
}
以上这篇vue setInterval 定时器失效的解决方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
教你如何在 Nuxt 3 中使用 wavesurfer.js
这篇文章主要介绍了如何在 Nuxt 3 中使用 wavesurfer.js,本文结合实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要为大家详细介绍了如何使用Vue封装一个前端通用右键菜单组件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要介绍了Vue的三种路由模式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
本文主要介绍了Vue 编程式路由导航2022-04-04
这篇文章主要介绍了在vue中实现禁止回退上一步,路由不存历史记录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要为大家详细介绍了在vue环境单页面项目下,如何实现不定高虚拟列表,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2023-10-10
这篇文章主要介绍了vue组件属性(props)及私有数据data解析，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
vscode的确是前端开发中很好的工具，安装颜色插件，从视觉上是美的享受。这篇文章主要介绍了vscode中vue代码颜色插件 ,需要的朋友可以参考下2018-10-10
这篇文章主要介绍了vue页面图片不显示问题解决方案,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下2021-09-09
这篇文章给大家介绍了vue3如何实现页面跳转,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友可以参考下2024-02-02
最新评论