小程序中如何解決代碼同步執行的問題

這篇文章主要介紹小程序中如何解決代碼同步執行的問題，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

在做小程序的時候，是不是經常遇到這兩種同步問題：

1.使用for循環，一個循環里面的操作還沒結束，下一個循環就已經開始了。如果循環之間沒有互相依賴，問題應該還不大，但是如果下一個循環的開始依賴于上一個循環的結果，那這一系列操作就會出現問題，比如畫圖：

for (let index in images) {
      //每畫一張圖，都要在上一張圖畫結束才能開始，因為要計算畫圖位置
      ctx.drawImage
}

2.調用服務器接口訪問數據、下載圖片等，服務器還未返回數據，代碼已經繼續執行其他代碼了，這明顯會出問題。

wx.downloadFile({
      url: URL,
      success(wr) {
      //如果其他執行代碼在success代碼塊里面，還能保證在成功獲取數據后正常執行
      //如果下載功能是共用的，其他操作邏輯肯定就會抽離出來，這樣就保證不了同步執行了。
      }
});

該怎么解決呢？
第一種情況，網上好多解決方案是加sync或者await，還有的加setInterval，這幾種方案我都沒有選，而且使用嵌套調用。

/**
   * 處理圖片
   */
  handleOneImage: function(ctx, images, idx) {
    let that = this;
    let oneImage = images[idx];
    let pro = new Promise(function(resolve, reject) {
      if (oneImage == undefined) {
        //畫圖結束
        //執行一系列操作
      } else {
        //成功畫圖結束，執行下一張圖的操作
        that.drawOneImage(ctx, oneImage, that.data.xp).then(isSuccess => {
          if (isSuccess == 'success') {
            that.handleOneImage(ctx, images, idx + 1);
          }
        });
      }
    });
    return pro;
  },
  /**
   * 畫圖片
   */
  drawOneImage: function(ctx, image, xp) {
    let that = this;
    //保證獲取圖片信息、畫圖等操作同步進行結束再返回結果
    let pro = new Promise(function(resolve, reject) {
      wx.getImageInfo({
        src: image,
        success: function(imageInfo) {
          let iWidth = imageInfo.width;
          let iHeight = imageInfo.height;
          let dWidth = (iWidth * 580) / iHeight;
          ctx.drawImage(image, xp, 0, dWidth, 580);
          ctx.stroke();
          that.setData({
            xp: that.data.xp + dWidth
          });
          resolve('success');
        }
      });
    });
    return pro;
  },

第二種情況：其實在解決第一種情況的代碼中，也用到了解決第二種情況的代碼，使用Promise，有需要的話可以研究下上面的代碼。

以上是“小程序中如何解決代碼同步執行的問題”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！