問題描述

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

<canvas wx:for='{{ model }}' bindtap='previewImg' canvas- 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)) } },

問題解答

這很正常，異步返回的時間具有不確定性，所以如果你同時有兩個異步方法，返回的先后順序也是不確定的。微信我沒做過，但應該也支持h5的同步方法，你可以試一下，不行的話加個變量控制，當請求隊列里有多個未返回時，你只顯示最后一個，其他的不讓顯示。