javascript - 关于一段 for 循环代码执行顺序的问题
问题描述
在微信小程序里边实现点击 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)) } },
问题解答
回答1:这很正常,异步返回的时间具有不确定性,所以如果你同时有两个异步方法,返回的先后顺序也是不确定的。微信我没做过,但应该也支持h5的同步方法,你可以试一下,不行的话加个变量控制,当请求队列里有多个未返回时,你只显示最后一个,其他的不让显示。
相关文章:
1. angular.js - ng-repeat嵌套的directive link函数未执行2. Help!求帮助3. ueditor上传服务器提示后端配置项没有正常加载,求助!!!!!4. javascript - h5 video层级太高导致浮在div上面,如何解决?5. javascript - 微信“分享到朋友圈”自定义分享内容,无法成功调用jssdk接口,不知为何6. 请问连接文件怎么写7. linux - 如何暂停运行中python脚本8. HTML5禁止img预览该怎么解决?9. css3 - 学习css构建图形时,遇到一个很有意思的现象,具体代码如下10. java - 我用Tomcat访问SQL server数据库时,出现以下错误,该怎么解决?