vue项目中定时器无法清除的原因解决
更新时间：2024年02月23日 15:53:05 作者：有蝉
页面有定时器,并且定时器在离开页面时,有清除,本文主要介绍了vue项目中定时器无法清除的原因解决,具有一定的参考价值,感兴趣的可以了解一下
当前页面有定时器，并且定时器在离开页面时，有清除
beforeDestroy() {
if (this.timer) {
clearInterval(this.timer)
this.timer = null
}
},原因
当前页面 (假设当前页面为page1) 的定时器是在一系列前置请求之后，才触发的。【此定时器前面有一堆请求，等这堆请求完成之后，定时器才会被触发】
路由切换过快的时候，切换到了其他页面（page2,page3...）时，当前页面（page1）的beforeDestroy函数已经触发了，但是当前页面（page1）的定时器还没有触发。当切换到其他页面（page2,page3...）的时候，当前页面（page1）的定时器才执行。
此种情况下，定时器无法清除
解决：执行定时器的时候，加个判断即可
判断路由是否为当前page1的路由名称。如果是当前的路由名称，才开始执行定时器
假如page1的路由name是【page1】
vue2和vue3思路都是如此
if (this.$route.name === 'page1') {
this.timer = setInterval(() => {
this.getListPage()
}, 3 * 1000)
}补：前端Vue项目中定时器清除问题
方法1：常规使用和清除
clearInterval(this.timer)//使用前先清空定时器
this.timer = setInterval(()=>{
console.log(1)
}, 1000)
方法2：使用数组存储每一个定时器的标识,避免某些原因导致定时器未能清除 (如：页面重复初始化)
if(!window.timer){ window.timer = []}
// 将存起来的定时器一并清除
window.timer.map(item=>{
clearInterval(item)
})
const timerId = setInterval(()=>{
console.log(1)
}, 1000)
window.timer.push(timerId)到此这篇关于vue项目中定时器无法清除的原因解决的文章就介绍到这了,更多相关vue 定时器无法清除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
本篇文章给大家总结了Visual Studio Code断点调试Vue的方法以及心得分享，需要的朋友参考学习下。2018-02-02
vue使用element-resize-detector监听元素宽度变化方式
这篇文章主要介绍了vue使用element-resize-detector监听元素宽度变化方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
这篇文章主要给大家介绍的是基于Vue2的移动端环境搭建，移动端大家更多想到的是响应布局，我们根据不同大小的屏幕进行适配，当然少不了我们的重头戏rem，移动端相比pc端就没什么特别的了。我会一步一步带领大家进入Vue2的世界，感兴趣的朋友下面来一起学习学习吧。2016-11-11
这篇文章主要介绍了Vue3 table表格组件的使用，文章围绕table表格组件是如何使用的相关资料展开详细内容,需要的朋友可以参考一下2021-11-11
这篇文章主要和大家一起探索Vue.js component内容实现,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-11-11
这篇文章主要介绍了Vuex入门到上手教程，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
本文给大家介绍Vue项目使用nginx方式部署前端,vue项目编译打包在项目根目录下运行npm run build 进行编译打包,本文给大家介绍的非常详细,需要的朋友跟随小编一起看看吧2023-10-10
vue项目中我们比较常用的模式为hash和history模式,下面这篇文章主要给大家介绍了关于Vue项目打包部署的全过程,讲解的是vue-router中history模式的部署,文中通过示例代码介绍的非常详细,需要的朋友可以参考下2023-05-05
element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)
这篇文章主要介绍了element中TimePicker时间选择器禁用部分时间(显示禁用到分钟)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-03-03
vue组件 keep-alive 和 transition 使用详解
这篇文章主要介绍了vue组件 keep-alive 和 transition 使用详解,需要的朋友可以参考下2019-10-10
最新评论