setTimeout解决同步函数执行问题

今天项目有个需求,新增活动列表和活动详情页面的分享,且这两个分享入口进入小程序只显示活动相关页面,无法看到小程序的其他页面,所以我选定用redirectTo去做导航。

提前说明:
pages/index/index:小程序统一入口页面
pages/activityList/activityList:活动列表页面
pages/activityResumeDetail/activityResumeDetail:活动报名人的简历详情页面

因为我们小程序分享入口很多,我在index.js写了一个start方法统一处理各种分享入口和正常进入小程序的逻辑。

/**
 * 根据jump值处理分享和非分享入口进入小程序
 * 一、非分享:默认是进简历列表
 * 二、分享渠道进入
 * 1:简历列表 2:榜单 3:我的页面 4:简历详情 5:职位详情 
 * 6:首页简历筛选条件页面 7:职位列表 8:邀请好友瓜分红包页面 
 * 其中,3:因为我的页面需要授权和绑定手机,从3进入的子页面发分享进入小程序只到我的页面
 **/
start: function () {
  var that = this
  if (this.data.jump == "2") {
    wx.switchTab({
      url: '/pages/rank/rank'
    })
  } else if (this.data.jump == "3") {
    wx.switchTab({
      url: '/pages/me/me'
    })
    } else if (this.data.jump == "7") {
    wx.switchTab({
      url: '/pages/position/position'
    })
  } else if (this.data.jump == "4" || this.data.jump == "5" || this.data.jump == "6" || this.data.jump == "8") {
    var tabUrl, pageUrl, lastPageUrl
    if (this.data.jump == "5") {
      tabUrl = "/pages/position/position"
      pageUrl = '/pages/jobDetail/jobDetail?jobId=' + this.data.jobId
    }else {
      tabUrl = "/pages/video/video"
      if (this.data.jump == "4") {
        pageUrl = '/pages/detail/detail?resumeId=' + this.data.resumeId
      } else if (this.data.jump == "6") {
        pageUrl = '/pages/filter/filter'
      } else {
        pageUrl = '/pages/shareRed/shareRed?jobId=' + this.data.jobId
      }
    }
    wx.switchTab({
      url: tabUrl,
      success: function () {
        setTimeout(function () {
          wx.navigateTo({
            url: pageUrl
          })
        }, 300)
      },
      fail: function () {
        wx.navigateTo({
          url: pageUrl
        })
      }
    })
  } else {
    wx.switchTab({
      url: '/pages/video/video'
    })
  }
}

这次主要的逻辑是处理jump=9 和 jump=10的跳转,一开始我是写的这样的:

if (this.data.jump == "9") {
  pageUrl = '/pages/activityList/activityList?activityId=' + that.data.activityId
  wx.redirectTo({
    url: pageUrl
  })
}else if (this.data.jump == "10") {
  pageUrl = '/pages/activityList/activityList?activityId=' + that.data.activityId
  lastPageUrl = '/pages/activityResumeDetail/activityResumeDetail?activityId=' + 
  that.data.activityId + '&resumeId=' + that.data.resumeId
  wx.redirectTo({
    url: pageUrl,
    success: function () {
      wx.navigateTo({
        url: lastPageUrl
      })
    },
    fail: function () {
      wx.navigateTo({
        url: lastPageUrl
      })
    }
  })
}

结果jump=10的情况没有出现预期结果,添加log打印。发现执行完redirectTo成功后,确实是会继续执行navigateTo,而且也成功了。但页面仍旧停留在activityList,而非最终目标页面activityResumeDetail,然后然后我就纳闷了。

于是我尝试改为先switchTab到tab页面,再navigateTo到目标页面,结果仍然无效,此时分享入口进来是还是停留在tab页面不是lastPageUrl页面。

wx.switchTab({
  url: pageUrl,
  success: function () {
    wx.navigateTo({
      url: lastPageUrl
    })
  },
  fail: function () {
    wx.navigateTo({
      url: lastPageUrl
    })
  }
})

查看其他jump入口进入,且有中间页面跳转到目标页面到情况,我发现我在第一次路由成功后增加了setTimeout来延迟,原来小程序提供到这些导航方法是同步的,捂脸~

原来我之前在start方法里写的setTimeout方法是为解决导航时同步执行引发的问题,即二次导航进入最终页面时来不及等到第一次导航成功回调再执行,而导致断点测试时方法执行,页面没跳到最终页面。

增加延迟后代码如下,运行如预期,撒欢~

else if (this.data.jump == "10") {
  pageUrl = '/pages/activityList/activityList?activityId=' + that.data.activityId
  lastPageUrl = '/pages/activityResumeDetail/activityResumeDetail?activityId=' + 
  that.data.activityId + '&resumeId=' + that.data.resumeId
  wx.redirectTo({
    url: pageUrl,
    success: function () {
      setTimeout({
        wx.navigateTo({
          url: lastPageUrl
        })
      }, 300)
    },
    fail: function () {
      wx.navigateTo({
        url: lastPageUrl
      })
    }
  })
}

PS:因为index页面是很早写的,那时候处理这个问题时没做记录,也没注释为什么使用setTimeout,所以才导致今天再次踩坑懵逼了,所以好记性不如烂笔头,现在记录防止自己再次掉坑

再次强调:
1、注释&笔记重要性
2、排查问题需找准方向

你可能感兴趣的:(setTimeout解决同步函数执行问题)