您好,欢迎访问一九零五行业门户网

小程序中解决代码同步执行的问题

在做小程序的时候,是不是经常遇到这两种同步问题:
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,有需要的话可以研究下上面的代码。
这些解决方案也是我的一个小程序里面的代码片段,小程名字叫图作妖,一个小而美的图片合成、剪切小程序,欢迎大家体验。
推荐教程:《微信小程序》
以上就是小程序中解决代码同步执行的问题的详细内容。
其它类似信息

推荐信息