这篇文章主要介绍小程序中如何解决代码同步执行的问题,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
在做小程序的时候,是不是经常遇到这两种同步问题:
1.使用for循环,一个循环里面的操作还没结束,下一个循环就已经开始了。如果循环之间没有互相依赖,问题应该还不大,但是如果下一个循环的开始依赖于上一个循环的结果,那这一系列操作就会出现问题,比如画图:
for (let index in images) {
//每画一张图,都要在上一张图画结束才能开始,因为要计算画图位置
ctx.drawImage
}
2.调用服务器接口访问数据、下载图片等,服务器还未返回数据,代码已经继续执行其他代码了,这明显会出问题。
wx.downloadFile({
url: URL,
success(wr) {
//如果其他执行代码在success代码块里面,还能保证在成功获取数据后正常执行
//如果下载功能是共用的,其他操作逻辑肯定就会抽离出来,这样就保证不了同步执行了。
}
});
该怎么解决呢?
第一种情况,网上好多解决方案是加sync或者await,还有的加setInterval,这几种方案我都没有选,而且使用嵌套调用。
/**
* 处理图片
*/
handleOneImage: function(ctx, images, idx) {
let that = this;
let oneImage = images[idx];
let pro = new Promise(function(resolve, reject) {
if (oneImage == undefined) {
//画图结束
//执行一系列操作
} else {
//成功画图结束,执行下一张图的操作
that.drawOneImage(ctx, oneImage, that.data.xp).then(isSuccess => {
if (isSuccess == 'success') {
that.handleOneImage(ctx, images, idx + 1);
}
});
}
});
return pro;
},
/**
* 画图片
*/
drawOneImage: function(ctx, image, xp) {
let that = this;
//保证获取图片信息、画图等操作同步进行结束再返回结果
let pro = new Promise(function(resolve, reject) {
wx.getImageInfo({
src: image,
success: function(imageInfo) {
let iWidth = imageInfo.width;
let iHeight = imageInfo.height;
let dWidth = (iWidth * 580) / iHeight;
ctx.drawImage(image, xp, 0, dWidth, 580);
ctx.stroke();
that.setData({
xp: that.data.xp + dWidth
});
resolve('success');
}
});
});
return pro;
},
第二种情况:其实在解决第一种情况的代码中,也用到了解决第二种情况的代码,使用Promise,有需要的话可以研究下上面的代码。
以上是“小程序中如何解决代码同步执行的问题”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注亿速云行业资讯频道!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。