EEUI/Weex 中使用 setInterval 定时器解决页面切换后定时器无法停止的问题

2024-01-04 08:11:55

正文

缘起

在项目首页中，需要有一个接口，每 30 秒刷新一次数据以更新状态。因此，我使用了定时器 setInterval 来实现这个功能。一开始，定时器能够正常工作，但在跳转到其他页面后，定时器却无法停止，清除定时器的方法也失效了。经过一番修改代码，我最终解决了这个问题。

问题分析

经过分析，我发现问题出在页面的生命周期处理上。当页面切换时，组件会被销毁，但定时器仍然存在，并且继续运行。这导致了内存泄漏和其他问题。

解决方案

为了解决这个问题，我使用了 clearInterval 方法来清除定时器。在组件销毁时，我会调用 clearInterval 方法来停止定时器。这样，定时器就不会继续运行，也就不会造成内存泄漏和其他问题了。

以下是如何在 EEUI/Weex 中使用 setInterval 定时器并正确停止定时器的示例代码：

export default {
  data() {
    return {
      timer: null
    }
  },
  methods: {
    startTimer() {
      this.timer = setInterval(() => {
        // 执行定时任务
      }, 30000)
    },
    stopTimer() {
      if (this.timer) {
        clearInterval(this.timer)
      }
    }
  },
  beforeDestroy() {
    this.stopTimer()
  }
}

在上面的代码中，我们在组件的 methods 对象中定义了 startTimer 和 stopTimer 方法。startTimer 方法用于启动定时器，而 stopTimer 方法用于停止定时器。在组件的 beforeDestroy 钩子函数中，我们调用 stopTimer 方法来停止定时器。这样，当组件被销毁时，定时器也会被停止，从而避免了内存泄漏和其他问题。