在用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)
}最后再分享两个清除的解决办法供大家选择。
方法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框架项目中定时器无法自动清除的原因分析及解决办法就分享给大家了，看完后喜欢的话记得收藏哦！
