在vue中使用setTimeout,离开当前路由setTimeout未销毁的问题

最新推荐文章于 2025-09-02 14:30:38 发布

原创最新推荐文章于 2025-09-02 14:30:38 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

本文探讨了在前端开发中，路由切换时定时器（如setTimeout和setInterval）的管理问题。当页面通过路由进行切换时，如果不正确地处理定时器，可能会导致定时器继续运行或重复创建的问题。文章提供了在Vue.js中使用data和methods来妥善管理定时器的解决方案，确保在页面离开时能够及时清除定时器，避免内存泄漏和不必要的计算。

问题:从第一个页面跳转到第二个页面后,如果停留在第二个页面，定时器还在运行。如果在两个页面之间来回跳转,跳转时间小于定时器的间隔时间时，也会出现重复创建setTimeout的情况。

原因:当我们刷新页面时，会将当前页面之前创建的setTimeout以及其他定时器都清除掉,但是仅仅是路由切换是不会清除的。

data () {
    return {
      ct: null
    }
}，

methods: {
	start() {
		this.ct= setTimeout( () => {that.countdown(end)}, 1000)
	}
	end() {
		clearTimeout(this.ct);  //清除
	}

setInterval()计时也需要clearInterval()来清除