洞察纵观鸿蒙next版本,如何凭借FinClip加强小程序的跨平台管理,确保企业在数字化转型中的高效运营和数据安全?
732
2022-10-01
小程序中解决代码同步执行的问题(小程序错误代码)
在做小程序的时候,是不是经常遇到这两种同步问题:
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,有需要的话可以研究下上面的代码。
这些解决方案也是我的一个小程序里面的代码片段,小程名字叫图作妖,一个小而美的图片合成、剪切小程序,欢迎大家体验。
推荐教程:《微信小程序》
版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。
发表评论
暂时没有评论,来抢沙发吧~