The clearInterval cleanup timer sometimes doesn't work?

  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(" ");
  }

several pages in the project update data every 4 seconds via Interval, and each time you enter the page, you start Interval, and leave the page and end Interval.
but sometimes when the network speed is poor, after jumping to another page, the console continues to output "page refreshed"? I don"t know what"s going on

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

the first page executes ajax using Synchronize (it takes a long time). Jump to another page before you reach setInterval,. ClearInterval (this.timer) this.timer is not set when you leave from the first page to execute onHide. Will you enter the second page or execute the timer of the first page? Is there any good solution to this situation?

Mar.31,2021

you are on the second page, but the first request has not been cancelled. So when the first request ends, the this.setTimer (). Continues

solution:

  

never used mpvue

Menu