小程序坑 redirectTo 计时器 setInterval clearInterval

Posted 2020-12-27 znsongshu

var time = 20；    
var timer = setInterval(function () {
      time = time - 1;
      that.setData({
        CountDown: time
      });
      console.log(time);
      if (time == 10) {
        clearInterval(timer );
        wx.redirectTo({
          url: ‘./game‘,
        });

      }
    }, 1000);

正常情况下页面刷新之后正在执行的计时器会被清除，可是在小程序当中并不是这样，即使执行了redirectTo关闭了当前页面到一个新页面，直到达到清除的条件之前（此例是time == 10）,老页面的计时器仍旧不会被清除，仍旧继续执行。

网友通过将timer添加到data中，通过以下方法获得setInterval返回值，并在onload的时候清楚上一个页面的计时器，这种做法是错误的，因为此时的this已是一个新的页面，再通过this.data.timer的方法是获取不到上一个页面的计时器id的。每次开始打印的都是

start:10000是达不到启动页面就能清除上一个页面的计时器的效果的。

  data: {
    timer: 10000
  }， 

onLoad: function(options) {
    var that = this;
    clearInterval(that.data.timer);
    console.log("start:" + that.data.timer );
    var time = 20;
    that.data.timer = setInterval(function () {
      time = time - 1;
      that.setData({
        CountDown: time
      });
      console.log(time);
      if (time == 10) {
        clearInterval(that.data.timer );
        wx.redirectTo({
          url: ‘./game‘,
        });

      }
    }, 1000);
    console.log("end:" + that.data.timer);*/

  }

 解决方法：redirectTo提供了接口调用成功或完成之后的success、complete的回调方法，只要在这里写clearInterval就能在跳转之前清除设置的interval了，在这里为便于其他的函数也能获取到当前页面的计时器进行清除，我们仍旧将timer设置到data中

  data: {
    timer: 10000
  }， 

onLoad: function(options) {
    var that = this;
    clearInterval(that.data.timer);
    console.log("start:" + that.data.timer );
    var time = 20;
    that.data.timer = setInterval(function () {
      time = time - 1;
      that.setData({
        CountDown: time
      });
      console.log(time);
      if (time == 10) {
        clearInterval(that.data.timer );
        wx.redirectTo({
          url: ‘./game‘,

　　　　　　　success: function() {

　　　　　　　　clearInterval(that.data.timer);

　　　　　　  }

        });

      }
    }, 1000);
    console.log("end:" + that.data.timer);*/

  }