javascript - 關於一段 for 迴圈程式碼執行順序的問題

Question

在微信小程式裡邊實作點擊canvas 將其轉換為圖片再預覽的功能，由於涉及非同步方法在for循環裡調用，參考網上建議，在for循環內部使用了一個立即執行函數，多次測試發現，有時候控制台會先印出"loop index is 1", 再印出"loop index is 0"，（為方便起見，model長度為2），導致這樣一種情況：你點擊第一張canvas，結果預覽的卻是第二張，百思不得其解，望大神賜教。

<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的同步方法，你可以試一下，不行的話加個變數控制，當請求佇列裡有多個未返回時，你只顯示最後一個，其他的不讓顯示。