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 定时器无法清除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
本文通过代码给大家介绍了Vue-drag-resize 拖拽缩放插件使用简单示例,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
这篇文章主要给大家介绍了关于利用jsx写vue组件的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。2017-07-07
这篇文章主要介绍了vue路由传参及获取参数的方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了在vue中使用Autoprefixed的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
vue如何设置输入框只能输入数字且只能输入小数点后两位,并且不能输入减号
这篇文章主要介绍了vue如何设置输入框只能输入数字且只能输入小数点后两位,并且不能输入减号问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-05-05
这篇文章主要介绍了Vue 子组件传父组件 $emit更新属性方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
Vite在默认配置下会将资源打包至assets文件夹并添加哈希值,不同于Webpack的多文件夹存放方式,Vite只对public文件夹不进行打包处理,而Webpack不打包public和static文件夹,本文介绍vite分目录打包及去掉默认的.gz 文件的操作方法,感兴趣的朋友一起看看吧2024-09-09
这篇文章主要为大家详细介绍了vue集成百度UEditor富文本编辑器的使用教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
在实际业务中，我们常用图表来做数据统计，数据展示，数据可视化等比较直观的方式来达到一目了然的数据查看，但在大屏开发过程中，常会因为适配不同屏幕而感到困扰，下面我们来解决一下这个不算难题的难题2022-11-11
这篇文章主要介绍了Vue 控制元素显示隐藏的方法和区别,需要的朋友可以参考下2022-12-12
最新评论