小程序中解决代码同步执行的问题
阅读 35491 · 发布日期 2020-08-24 17:26 · 温州优光网络科技有限公司|建站|APP小程序制作|做网站SEO推广优化
【摘要】
在做小程序的时候,是不是经常遇到这两种同步问题:1.使用for循环,一个循环里面的操作还没结束,下一个循环就已经开始了。如果循环之间没有互相依赖,问题应该还不大,但是如果下一个循环的开始依赖于上一个循环的结果,那这一系列操作就会出现问题,比如画图:for (let index in images) {
//... 【温州小程序开发,温州微信公众号,平阳做网站,平阳网站建设公司,平阳小程序商城制作,昆阳万全做网站,鳌江水头小程序,萧江腾蛟微信公众号,山门顺溪南雁海西南麂凤卧麻步怀溪网络网店服务,政采云网店管理服务】...
在做小程序的时候,是不是经常遇到这两种同步问题:
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,有需要的话可以研究下上面的代码。
这些解决方案也是我的一个小程序里面的代码片段,小程名字叫图作妖,一个小而美的图片合成、剪切小程序,欢迎大家体验。
推荐教程:
《微信小程序》以上就是小程序中解决代码同步执行的问题的详细内容,更多请关注php中文网其它相关文章!
微信
分享相关标签:
小程序本文转载于:
简书,如有侵犯,请联系a@php.cn删除
上一篇:
小程序画布canvas隐藏的问题解决
下一篇:
小程序支付及退款流程详解相关文章相关视频微信小程序转发好友的功能在微信小程序中用户登录和登录状态维护快速实现一个微信小程序的Button组件电脑微信小程序设置全屏的方法是什么?小程序中解决代码同步执行的问题(欧阳克)微信小程序与CMS后台小程序项目介绍预览登录小程序中心 [温州做小程序]