清理定时器

一、常规定时器的设置

参考文章小学生study

1、普通写法

export default {
  data() {
    return {
      timer: null
    }
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}

clearInterval 后没有清空 timer 为 null。
开启定时器和清除定时器的代码分散开在两个地方，有损可读性/维护性，用尤大大的话说，这使得我们比较难于程序化地清理我们建立的东西。
timer 被定义在 data 里，实际上 timer 不需要什么响应式操作，定义在 data 里是没必要的，反而造成性能浪费。

2、优雅写法

export default {
  data() {
    return {
    }
  },
  
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

这里使用 hook 监听 beforeDestroy 生命周期，这样 timer 只需被定义在生命周期里，以上的问题就全部解决了。

3、加了 keep-alive 缓存时的写法

但在后台系统中，我们常常会设置页面缓存，而当路由被 keep-alive 缓存时是不走 beforeDestroy 生命周期的，所以有些小伙伴以为在 beforeDestroy 清除定时器就完事了，甚至都没有检查一下，实际上定时器并没有被清除掉。知道了原因也就好解决了，借助 activated 和 deactivated 这两个生钩子：

export default {
  data() {
    return {
    }
  },
  mounted() {
    let timer = setInterval(() => {
      console.log('setInterval')
    }, 2000)
    this.$on('hook:activated', () => {
      if (timer === null) { // 避免重复开启定时器
        timer = setInterval(() => {
          console.log('setInterval')
        }, 2000)
      }
    })
    this.$on('hook:deactivated', () => {
      clearInterval(timer)
      timer = null
    })
  }
}

二、但如果页面有多个定时器，并不想逐个去清理

setInterval和setTimeout返回的ID是一起递增的，想要清除所有的setInterval和setTimeout，只要新加一个然后循环清除
参考文章 wade3po

let endTid = setTimeout(function () {});
for (let i = 0; i <= endTid; i++) {
  clearTimeout(i)
  clearInterval(i)
}

1、如果在组件销毁时使用该方法，会一并清理掉其他组件上的定时器。
2、如果使用在路由跳转的位置，只能在页面跳转时清理掉系统的定时器，无法用于页面销毁前组件定时器上。