在微信小程式裡邊實作點擊canvas 將其轉(zhuǎn)換為圖片再預覽的功能,由於涉及非同步方法在for循環(huán)裡調(diào)用,參考網(wǎng)上建議,在for循環(huán)內(nèi)部使用了一個立即執(zhí)行函數(shù),多次測試發(fā)現(xiàn),有時候控制臺會先印出"loop index is 1", 再印出"loop index is 0",(為方便起見,model長度為2),導致這樣一種情況:你點擊第一張canvas,結(jié)果預覽的卻是第二張,百思不得其解,望大神賜教。
<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) { // 循環(huán)到最后一個了
console.log('current image is ' + tempFilePathList[index]);
wx.previewImage({
current: tempFilePathList[index], // 當前顯示圖片的http鏈接
urls: tempFilePathList // 需要預覽的圖片http鏈接列表
})
}
},
fail: function (res) {
console.log(res);
}
});
}(i))
}
},
擁有18年軟件開發(fā)和IT教學經(jīng)驗。曾任多家上市公司技術(shù)總監(jiān)、架構(gòu)師、項目經(jīng)理、高級軟件工程師等職務。 網(wǎng)絡人氣名人講師,...
這很正常,非同步返回的時間具有不確定性,所以如果你同時有兩個非同步方法,返回的先後順序也是不確定的。微信我沒做過,但應該也支援h5的同步方法,你可以試一下,不行的話加個變數(shù)控制,當請求佇列裡有多個未返回時,你只顯示最後一個,其他的不讓顯示。