vue组件销毁时定时器依然执行问题
1、先上代码:<script>import { setInterval } from 'timers'export default {name: 'Monitor',data() {return {intervalId: null}},methods: {star...
·
1、先上代码:
<script>
import { setInterval } from 'timers'
export default {
name: 'Monitor',
data() {
return {
intervalId: null
}
},
methods: {
startTimer() {
if (!this.intervalId) {
this.intervalId = setInterval(() => {
console.log('开始定时...每过15秒执行一次刷新')
}, 15000)
}
console.log(this.intervalId)
},
closeTimer() {
if (this.intervalId) {
window.clearInterval(this.intervalId)
this.intervalId = null
}
}
},
created() {
this.startTimer()
},
beforeDestroy() {
this.closeTimer()
}
}
2、问题描述:
原本希望组件Monitor销毁时定时器应该停止,然而并没有,定时器还是会执行。上网搜索了半天,真的是半天,并没有夸张。然而还是没有用。
3、最后成功解决的操作:
由于定时器是定义在全局变量window上的方法,因此在组件销毁时定时器并不会销毁,想要在组件销毁时停止定时器只用在beforeDestroy()钩子函数中关闭定时器即可。
更多推荐
已为社区贡献10条内容
所有评论(0)