javascript – Fragen zur Ausführungsreihenfolge eines for-Schleifencodes

Question

Im WeChat-Applet können Sie auf die Leinwand klicken, um sie in ein Bild umzuwandeln und sie dann in der Vorschau anzuzeigen. Da dabei asynchrone Methoden in der for-Schleife aufgerufen werden, habe ich auf Online-Vorschläge verwiesen und eine Funktion zur sofortigen Ausführung innerhalb der for-Schleife verwendet Nach vielen Tests wurde festgestellt, dass die Konsole zunächst „Schleifenindex ist 1“ und dann „Schleifenindex ist 0“ ausgibt (der Einfachheit halber beträgt die Modelllänge 2). In einer Situation wie dieser: Sie klicken auf die erste Leinwand und das Ergebnis wird in der Vorschau angezeigt. Aber es ist die zweite, ich bin verwirrt und hoffe, dass Gott mich aufklären kann.

<canvas wx:for="{{ model }}" bindtap="previewImg" canvas-id="{{ 'mycanvas' + index }}" data-index="{{ index }}"/>

 // 点击图片进行预览
  previewImg: function (e) {
    var tempFilePathList = [];
    var index = e.target.dataset.index;
    var self = this;
    var loopedModel = self.data.model;
    for (var i = 0; i < loopedModel.length; i++) {
      (function (a) {
        wx.canvasToTempFilePath({
          canvasId: 'mycanvas' + a,
          success: function (res) {
            console.log('loop index is ' + a);
            tempFilePathList.push(res.tempFilePath);
            if (a == loopedModel.length - 1) { // 循环到最后一个了
              console.log('current image is ' + tempFilePathList[index]);
              wx.previewImage({
                current: tempFilePathList[index], // 当前显示图片的http链接
                urls: tempFilePathList // 需要预览的图片http链接列表
              })
            }
          },
          fail: function (res) {
            console.log(res);
          }
        });
      }(i))
    }
  },

Answer 1

这很正常，异步返回的时间具有不确定性，所以如果你同时有两个异步方法，返回的先后顺序也是不确定的。微信我没做过，但应该也支持h5的同步方法，你可以试一下，不行的话加个变量控制，当请求队列里有多个未返回时，你只显示最后一个，其他的不让显示。