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

成都創(chuàng)新互聯(lián)長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為察布查爾錫伯企業(yè)提供專業(yè)的成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)，察布查爾錫伯網(wǎng)站改版等技術(shù)服務(wù)。擁有10年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。

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

for (let index in images) {
      //每畫一張圖，都要在上一張圖畫結(jié)束才能開始，因?yàn)橐?jì)算畫圖位置
      ctx.drawImage
}

2.調(diào)用服務(wù)器接口訪問數(shù)據(jù)、下載圖片等，服務(wù)器還未返回?cái)?shù)據(jù)，代碼已經(jīng)繼續(xù)執(zhí)行其他代碼了，這明顯會出問題。

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

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

/**
   * 處理圖片
   */
  handleOneImage: function(ctx, images, idx) {
    let that = this;
    let oneImage = images[idx];
    let pro = new Promise(function(resolve, reject) {
      if (oneImage == undefined) {
        //畫圖結(jié)束
        //執(zhí)行一系列操作
      } else {
        //成功畫圖結(jié)束，執(zhí)行下一張圖的操作
        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;
    //保證獲取圖片信息、畫圖等操作同步進(jìn)行結(jié)束再返回結(jié)果
    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;
  },

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

這些解決方案也是我的一個小程序里面的代碼片段，小程名字叫圖作妖，一個小而美的圖片合成、剪切小程序，歡迎大家體驗(yàn)。

推薦教程：《微信小程序》

分享標(biāo)題：小程序中解決代碼同步執(zhí)行的問題
當(dāng)前網(wǎng)址：http://www.rwnh.cn/article26/cgpicg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、動態(tài)網(wǎng)站、電子商務(wù)、關(guān)鍵詞優(yōu)化、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)