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()钩子函数中关闭定时器即可。

 

 

Logo

前往低代码交流专区

更多推荐