Skip to content

[vue] vue组件里的定时器要怎么销毁? #446

Open
@haizhilin2013

Description

@haizhilin2013
Collaborator

[vue] vue组件里的定时器要怎么销毁?

Activity

WalkAlone0325

WalkAlone0325 commented on Jun 28, 2019

@WalkAlone0325

在生命周期的beforeDestroy或者destroyed进行手动销毁吗?

xindiyang

xindiyang commented on Jun 30, 2019

@xindiyang

当生命周期销毁后,并没有将组件中的计时器销毁,虽然页面上看不出来,但是如果在控制台打印的话,会发现计时器还在运行,所以要销毁计时器,避免代码一直执行

Wu-wb

Wu-wb commented on Jul 23, 2019

@Wu-wb

const timer = setInterval(() =>{
// 某些定时器操作
}, 500);
// 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
clearInterval(timer);
})

wush12

wush12 commented on Nov 5, 2019

@wush12

可以在beforeDestroy里写清除函数

wql77

wql77 commented on Dec 17, 2019

@wql77

可以在路由离开前清除
beforeRouteLeave(to, from, next) {
//做清除操作。。。
next();
}

kuguchengsha

kuguchengsha commented on Nov 13, 2020

@kuguchengsha

那如果我要切出浏览器定时器暂停,切会时定时器还要继续,刚进入页面定时器是不启动的,定时器启动后切出页面后关闭网页后再打开这个网页定时器时启动的

1103442828

1103442828 commented on May 8, 2021

@1103442828

这里还要考虑 KeepAlive 缓存的情况 建议在deactivated中执行一次销毁

hyj443

hyj443 commented on Oct 27, 2021

@hyj443

我之前是在data里定义个timer接收定时器id,然后在beforeDestroy钩子里清除timer

但这么做不好,因为你没必要在vm实例保存它,你用到的时候只是在beforeDestroy钩子里

我们可以在创建定时器后,就马上调用vm.$once去监听beforeDestroy钩子的执行,钩子执行时,执行清除定时器的回调,但只触发一次,触发后,监听器会被移除

this.$once('hook:beforeDestroy', () => {
    clearInterval(timer);
})
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      No branches or pull requests

        Participants

        @haizhilin2013@wush12@xindiyang@wql77@kuguchengsha

        Issue actions

          [vue] vue组件里的定时器要怎么销毁? · Issue #446 · haizlin/fe-interview