小程序中setTimeout轮询判断数据更新后跳转

1.业务描述
通过微信支付开通vip，判断信息更新后再跳转

2.产生问题
通过setTimeout进行间隔一秒发送请求，数据比较，成功更新后通过wx.navigateTo跳转，此时setTimeout依然在后台持续调用

3.解决思路
setTimeout在每次调用后将生成一个标识符，而且每次都不同，所以用一个数组来保存起来，同时在页面离开时候清除所有的定时器

4.代码

data: {
  oldVal: '',
  timeList: []
},

onLoad: function(options) {
  this.pay()   
},

// 点击左上角返回箭头时候触发
onUnload: function(options) {
  for (let i = 0; i < this.data.timeList.length; i++) {
    clearTimeout(this.data.timeList[i])
  }
},

// 点击系统Home键返回上一步时候触发
onHide: function(options) {
  for (let i = 0; i < this.data.timeList.length; i++) {
    clearTimeout(this.data.timeList[i])
  }
},

checkIsUpdate: function () {
  wx.showLoading({
    title: '请稍候'
  })
  ajax((res)=>{
    let oldVal = this.data.oldVal
    let newVal = res.newVal
    let time = setTimeout(()=>{
      if (oldVal == newVal) {
        this.checkIsUpdate()
      } else {
        wx.hideLoading()
        wx.switchTab({
          url: '../my/my'
        })
      }
    }, 1000)
    this.data.timeList.push(time)
  })
},

pay: function () {
  let that = this
  payCallBack((res)=>{
    wx.showToast({
      title: '微信充值成功',
      icon: 'none',
      duration: 2000
      })
      that.checkIsUpdate()
  })
},

5.后记
在更新支付状态的时候可能发生用户离开当前页面，此时就需要清除计数器，否则，悬浮的模态框会在所有页面出现
用户离开页面包括两种动作，点击左上角的返回按钮，或者点击手机home键返回，这两种情况需要分别处理

6.其它方案

以上方案之所以要把所有延时句柄保存起来是因为，无法确定当前正在进入延时队列中的是具体的那个一，无法定点清除，所以就粗暴的将所有都保存起来，全部清除

后面经过思考，其实这里可以设置一个变量作为一个flag开关，在调用setTimeout时候先判断flag的值，在页面离开时候重置flag的值