javascript - 关于一段 for 循环代码执行顺序的问题
在微信小程序里边实现点击 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))
}
},
