vue中如何清除定时器

问题描述

  在某个vue组件内，每隔一段时间调用一次请求获取新的数据，离开当前页面，移除定时器

解决方案

• 方案一：路由拦截，清除定时器

  ① 在组件内设置定时器，并存储由 setInterval() 返回的 ID 值

  mounted () {
    // 设置定时器
    const testSetinterval = setInterval(() => {
      setTimeout(() => {
        console.log('test clearInterval')
      }, 0)
    }, 2000)
    // 存储定时器返回的 ID 值, 以便后续清除时使用
    this.$ls.set('testSetinterval', testSetinterval)
  },

 ② 拦截前端路由，清除定时器

router.beforeEach((to, from, next) => {
  // 清除定时器
  if (Vue.ls.get('echartInterval')) {
    window.clearInterval(Vue.ls.get('echartInterval'))
  }
})

• 方案二：通过 $once 一次性侦听一个事件，程序化清理监听器，在组件内的beforeDestory钩子中清除

  mounted () {
    const that = this
    // 设置定时器
    const testSetinterval = setInterval(() => {
      setTimeout(() => {
        console.log('test clearInterval')
      }, 0)
    }, 2000)
    // 通过$once来监听生命周期beforeDestroy钩子，在组件销毁前清除定时器。
    this.$once('hook:beforeDestroy', () => {
      clearInterval(testSetinterval)
    })
  },

特别说明： 方案一和以下方式不建议采取，它们的建立代码都独立于清理代码，使我们难以程序化清理我们所建立的东西，毕竟，除了编码风格以外，setInterval是个危险的小东西呀.....

  mounted () {
    const that = this
    // 组件中保存testSetinterval属性
    this.testSetinterval = setInterval(() => {
      setTimeout(() => {
        console.log('test clearInterval')
      }, 0)
    }, 2000)
  },
  beforeDestroy: function () {
    // 清除这个定时器
    clearInterval(this.testSetinterval)
  }