Lösen Sie das Problem der Codesynchronisationsausführung in kleinen Programmen

Beim Erstellen kleiner Programme treten häufig diese beiden Synchronisierungsprobleme auf:

1. Bei Verwendung einer for-Schleife ist der Vorgang in einer Schleife noch nicht beendet und die nächste Schleife hat bereits begonnen. Wenn keine gegenseitige Abhängigkeit zwischen den Schleifen besteht, sollte das Problem nicht groß sein. Wenn der Start der nächsten Schleife jedoch vom Ergebnis der vorherigen Schleife abhängt, treten Probleme bei dieser Reihe von Vorgängen auf, z. B. beim Zeichnen:

for (let index in images) {
      //每画一张图，都要在上一张图画结束才能开始，因为要计算画图位置
      ctx.drawImage
}

2 .Rufen Sie die Serverschnittstelle auf, um auf Daten zuzugreifen, Bilder herunterzuladen usw., aber der Server hat die Daten nicht zurückgegeben und der Code hat weiterhin andere Codes ausgeführt, was offensichtlich zu Problemen führen wird.

wx.downloadFile({
      url: URL,
      success(wr) {
      //如果其他执行代码在success代码块里面，还能保证在成功获取数据后正常执行
      //如果下载功能是共用的，其他操作逻辑肯定就会抽离出来，这样就保证不了同步执行了。
      }
});

Wie löst man das Problem?
Im ersten Fall bestehen viele Lösungen im Internet darin, „sync“ oder „await“ hinzuzufügen, und einige fügen „setInterval“ hinzu. Ich habe keine dieser Lösungen ausgewählt und verschachtelte Aufrufe verwendet.

/**
   * 处理图片
   */
  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;
  },

Zweiter Fall: Tatsächlich wird der Code zur Lösung des ersten Falls auch zur Lösung des zweiten Falls verwendet. Bei Bedarf können Sie den obigen Code studieren.

Diese Lösungen sind auch Codeausschnitte aus einem kleinen Programm von mir. Xiaochengs Name ist Tu Zuo Yao. Es ist ein kleines und schönes Bildsynthese- und Schneide-Applet.

Empfohlenes Tutorial: „WeChat Mini-Programm“

Das obige ist der detaillierte Inhalt vonLösen Sie das Problem der Codesynchronisationsausführung in kleinen Programmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!