setTimeout解決同步函數(shù)執(zhí)行問題

今天項目有個需求擎场，新增活動列表和活動詳情頁面的分享迅办，且這兩個分享入口進(jìn)入小程序只顯示活動相關(guān)頁面站欺，無法看到小程序的其他頁面，所以我選定用redirectTo去做導(dǎo)航镊绪。

提前說明：
pages/index/index：小程序統(tǒng)一入口頁面
pages/activityList/activityList：活動列表頁面
pages/activityResumeDetail/activityResumeDetail：活動報名人的簡歷詳情頁面

因為我們小程序分享入口很多蝴韭，我在index.js寫了一個start方法統(tǒng)一處理各種分享入口和正常進(jìn)入小程序的邏輯。

/**
 * 根據(jù)jump值處理分享和非分享入口進(jìn)入小程序
 * 一履磨、非分享：默認(rèn)是進(jìn)簡歷列表
 * 二庆尘、分享渠道進(jìn)入
 * 1:簡歷列表 2:榜單 3:我的頁面 4:簡歷詳情 5:職位詳情 
 * 6:首頁簡歷篩選條件頁面 7:職位列表 8:邀請好友瓜分紅包頁面 
 * 其中，3:因為我的頁面需要授權(quán)和綁定手機(jī)矛辕，從3進(jìn)入的子頁面發(fā)分享進(jìn)入小程序只到我的頁面
 **/
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的跳轉(zhuǎn)聊品，一開始我是寫的這樣的：

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
      })
    }
  })
}

結(jié)果jump=10的情況沒有出現(xiàn)預(yù)期結(jié)果翻屈，添加log打印伸眶。發(fā)現(xiàn)執(zhí)行完redirectTo成功后刽宪，確實是會繼續(xù)執(zhí)行navigateTo，而且也成功了涂臣。但頁面仍舊停留在activityList售担，而非最終目標(biāo)頁面activityResumeDetail署辉，然后然后我就納悶了。

于是我嘗試改為先switchTab到tab頁面哥攘，再navigateTo到目標(biāo)頁面，結(jié)果仍然無效逝淹，此時分享入口進(jìn)來是還是停留在tab頁面不是lastPageUrl頁面栅葡。

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

查看其他jump入口進(jìn)入，且有中間頁面跳轉(zhuǎn)到目標(biāo)頁面到情況规脸，我發(fā)現(xiàn)我在第一次路由成功后增加了setTimeout來延遲熊咽，原來小程序提供到這些導(dǎo)航方法是同步的，捂臉～

原來我之前在start方法里寫的setTimeout方法是為解決導(dǎo)航時同步執(zhí)行引發(fā)的問題横殴，即二次導(dǎo)航進(jìn)入最終頁面時來不及等到第一次導(dǎo)航成功回調(diào)再執(zhí)行，而導(dǎo)致斷點測試時方法執(zhí)行氏身，頁面沒跳到最終頁面惑畴。

增加延遲后代碼如下，運(yùn)行如預(yù)期陷虎，撒歡～

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，所以才導(dǎo)致今天再次踩坑懵逼了庄萎，所以好記性不如爛筆頭糠涛，現(xiàn)在記錄防止自己再次掉坑

再次強(qiáng)調(diào)：
1、注釋&筆記重要性
2忍捡、排查問題需找準(zhǔn)方向