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

35次阅读

共计 413 个字符，预计需要花费 2 分钟才能阅读完成。

问题: 从第一个页面跳转到第二个页面后, 如果停留在第二个页面，定时器还在运行。如果在两个页面之间来回跳转, 跳转时间小于定时器的间隔时间时，也会出现重复创建 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;
})
}