vue项目中定时器无法清除的原因解决

2024-03-01 0 756

当前页面有定时器,并且定时器在离开页面时,有清除

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定时器清除不掉,导致功能频繁执行问题
  • vue中清除定时器的方法实例详解
  • VUE设置和清除定时器的方式及遇到的问题
  • Vue如何优雅的清除定时器

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 JavaScript vue项目中定时器无法清除的原因解决 https://www.u-9.cn/biancheng/javascript/181850.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务