clearInterval 清除定时器 有时候会无效？

Question

  methods: {
    async init () {
      await this.getData();
      this.setTimer()
    },
    async getData() {
      //...ajax 获取数据
    }
    async setTimer() {
      this.timer = setInterval(() => {
        this.oldItems = this.items;
        this.aniTimer ? clearTimeout(this.aniTimer) : "";
        if (this.token) {
          this.getData();
          console.log("页面一刷新了");
        }
      }, 4000);
    }
  },
  async onShow() {
    this.init()
  },
  onHide() {
    clearInterval(this.timer);
    console.log("页面一 结束刷新了");
  }

项目中几个页面都是通过Interval 每4秒更新数据，每次进入页面都开始Interval，离开页面都结束Interval。
但有时网速比较差时，跳转到另一个页面的后，控制台还在不断输出"页面一刷新了"？不知道是什么情况

----------------------------------------------------

第一个页面执行ajax都是使用同步的（耗时很长），还没走到setInterval，就跳转到另一个页面，从第一个页面离开执行onHide时clearInterval(this.timer) this.timer还没有设定，进入第二个页面还是会执行第一个页面的定时器？这种情况有什么好的解决方法？

Answer 1

你到第二个页面了,但拟第一个请求并没有被取消. 所以当第一个请求结束时,继续执行了 this.setTimer().

解决方案:

async setTimer() {
  // 页面已经隐藏了,不设置 timer.
  if (this._hide) return;

  this.timer = setInterval(() => {
      this.oldItems = this.items;
      this.aniTimer ? clearTimeout(this.aniTimer) : "";
      if (this.token) {
          this.getData();
          console.log("页面一刷新了");
      }
  }, 4000);
}
onHide() {
 this._hide = true.
},

Answer 2

这是vue吗？
onShow和onHide什么时候调用的？？？

Answer 3

没用过mpvue