捕捉一个定时器和闭包陷阱的记忆泄漏

2023-10-21 09:11:44

在最近的一个项目中，我遇到一个奇怪的内存泄漏问题，起因是团队成员报告说，应用程序在长时间运行后会逐渐变慢。经过一番调查，我发现问题出在一个使用了定时器和闭包的组件中。

该组件是一个看板，它每20秒切换一次下面的两个小蓝点。为了实现这个功能，我使用了setInterval函数来创建一个定时器，每20秒调用一次changeDots函数。changeDots函数会改变小蓝点的状态，并刷新图表。

export default {
  methods: {
    // 切换小蓝点并刷新图表
    changeDots() {
      this.dots = this.dots.reverse()
      this.chart.changeData(this.dots)
    }
  },
  created() {
    // 每20秒切换小蓝点
    setInterval(() => {
      this.changeDots()
    }, 20000)
  }
}

起初，一切似乎都工作得很好。但是，随着应用程序运行的时间越来越长，我注意到内存使用量也在不断增加。使用Chrome DevTools的内存分析工具，我发现有一个闭包正在持有对changeDots函数的引用，从而导致this对象及其所有属性无法被垃圾回收。

const intervalId = setInterval(() => {
  this.changeDots()
}, 20000)

为了解决这个问题，我需要清除定时器，以使闭包中的this对象可以被垃圾回收。我使用clearInterval函数来实现这一点。

export default {
  methods: {
    // 切换小蓝点并刷新图表
    changeDots() {
      this.dots = this.dots.reverse()
      this.chart.changeData(this.dots)
    }
  },
  created() {
    // 每20秒切换小蓝点
    const intervalId = setInterval(() => {
      this.changeDots()
    }, 20000)
    // 清除定时器
    this.$once('beforeDestroy', () => {
      clearInterval(intervalId)
    })
  }
}