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

2024年5月14日 196次阅读 来源: 凉薄pc

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

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

解决：具体代码：`

data () {
    return {
      overtimer: null
    }
}，
methods: {
    stoptime () {
      clearTimeout(this.overtimer);
    }
}，
created () {
    this.overtimer = setTimeout(() => {
        this.$Message.error('读取卡片超时');
     }, 10000)
    this.$once('hook:beforeDestroy', () => {            
      clearInterval(this.overtimer);
      this.overtimer = null;
    })
}

`

    原文作者：凉薄pc
    原文地址: https://segmentfault.com/a/1190000018806661
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞