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

爱若成殇

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

1.   beforeDestroy() {
   
2. 
   
3.     if (this.timer) {
   
4. 
   
5.       clearInterval(this.timer)
   
6. 
   
7.       this.timer = null
   
8. 
   
9.     }
   
10. 
    
11.   },

复制代码

原因

当前页面 (假设当前页面为page1) 的定时器是在一系列前置请求之后，才触发的。【此定时器前面有一堆请求，等这堆请求完成之后，定时器才会被触发】
路由切换过快的时候，切换到了其他页面（page2,page3...）时，当前页面（page1）的beforeDestroy函数已经触发了，但是当前页面（page1）的定时器还没有触发。当切换到其他页面（page2,page3...）的时候，当前页面（page1）的定时器才执行。
此种情况下，定时器无法清除
解决：执行定时器的时候，加个判断即可
判断路由是否为当前page1的路由名称。如果是当前的路由名称，才开始执行定时器
假如page1的路由name是【page1】
vue2和vue3思路都是如此

1.         if (this.$route.name === 'page1') {
   
2.           this.timer = setInterval(() => {
   
3.               this.getListPage()
   
4.           }, 3 * 1000)
   
5.         }

复制代码

补：前端Vue项目中定时器清除问题

1. 方法1：常规使用和清除

复制代码

1. clearInterval(this.timer)//使用前先清空定时器
   
2. this.timer = setInterval(()=>{
   
3.     console.log(1)
   
4. }, 1000)

复制代码

1. 方法2：使用数组存储每一个定时器的标识,避免某些原因导致定时器未能清除 (如：页面重复初始化)

复制代码

1. if(!window.timer){ window.timer = []}
   
2. // 将存起来的定时器一并清除
   
3. window.timer.map(item=>{
   
4.     clearInterval(item)
   
5. })
   
6. 
   
7. const timerId = setInterval(()=>{
   
8.     console.log(1)
   
9. }, 1000)
   
10. window.timer.push(timerId)

复制代码

到此这篇关于vue项目中定时器无法清除的原因解决的文章就介绍到这了,更多相关vue 定时器无法清除内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

来源:https://www.jb51.net/javascript/316240nxj.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！