javascript - Questions sur l'ordre d'exécution d'un code de boucle for

Question

Dans l'applet WeChat, vous pouvez cliquer sur le canevas pour le convertir en image, puis le prévisualiser. Comme cela implique l'appel de méthodes asynchrones dans la boucle for, j'ai fait référence à des suggestions en ligne et utilisé une fonction d'exécution immédiate dans la boucle for. .Après de nombreux tests, il a été constaté qu'il y a À ce moment, la console imprimera d'abord « l'index de boucle est 1 », puis imprimera « l'index de boucle est 0 » (pour plus de commodité, la longueur du modèle est 2), ce qui entraîne. dans une situation comme celle-ci : vous cliquez sur la première toile et le résultat est prévisualisé. Mais c'est la deuxième. Je suis perplexe et j'espère que Dieu pourra m'éclairer.

<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

C'est normal. L'heure du retour asynchrone est incertaine, donc si vous avez deux méthodes asynchrones en même temps, l'ordre de retour est également incertain. Je ne l'ai pas fait avec WeChat, mais il devrait également prendre en charge la méthode de synchronisation h5. Si cela ne fonctionne pas, ajoutez un contrôle variable. Lorsqu'il y a plusieurs requêtes dans la file d'attente qui n'ont pas été renvoyées. vous n'afficherez que le dernier, et les autres ne seront pas affichés.