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

在做小程序的时候，是不是经常遇到这两种同步问题：

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，有需要的话可以研究下上面的代码。

这些解决方案也是我的一个小程序里面的代码片段，小程序名字叫图作妖，欢迎大家体验。

小程序，解决代码同步执行问题相关推荐

uni开发微信小程序解决全局分享分销问题
uni开发微信小程序解决全局分享分销问题 1. 需求 1.小程序内每个页面都要打开胶囊分享按钮并实现分销 2.分享功能应该是在用户登录之后才予以打开 3.不想做在每个页面都写分享钩子的傻逼操作 2.实 ...
使用微信开发工具开发微信小程序（一）——小程序的代码构成与运行环境
从零开始学习开发微信小程序,对比前端的页面开发,简单易上手. 接下来会持续更新,大家一起学习讨论. 小程序开发与前端网页开发的区别运行环境不同:浏览器环境.微信环境开发模式不同:网页开发,浏览器+ ...
如何同步微信信息php,微信小程序中实现同步请求的方法
本篇文章给大家带来的内容是关于微信小程序中实现同步请求的方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 微信小程序默认是用同步请求的,但有些时候需要数据的同步请求,可使用的方法有 ...
微信小程序请求函数同步封装方法
微信小程序请求函数同步封装方法距上回说到,我们使用微信小程序请求函数时,需要多次调用,之前我们封装了一套代码,但是他是异步的,当我们下一个请求函数需要的数据是上一个请求函数得到的时候,就不可以了 ...
git pull 代码库时提示冲突需Merge 快速解决代码同步遇到的冲突问题 so easy的方法
前言 git pull 代码库时提示冲突需Merge 快速解决代码同步遇到的冲突问题 so easy的方法. 问题 1.> git pull origin master 提示信息:error: ...
微信小程序解决flex布局，最后一行靠左对齐问题
微信小程序解决flex布局,最后一行靠左对齐问题需求:使用flex布局,每行固定三个元素,元素间距自适应,向左对齐实际效果与代码如下: wxml <view class="con- ...
微信小程序实现代码高亮
预览老规矩,先上效果图. 看起来效果还不错,实名感谢日出一点一这位小哥的教程. 因为,当搜索微信小程序实现代码高亮后,结果基本都是微信小程序搜索,关键词高亮这一类的.Onz ,这可真是在 ...
微信小程序解决请求服务器手机预览请求不到数据的方法
微信小程序解决请求服务器手机预览请求不到数据的方法微信小程序的文档中明确说明了所有的请求是必须使用https的,以没用过https,由于小程序,不得不接触到https,研究了好长时间把tomcat ...
python软件代码示例-用Python写一个模拟qq聊天小程序的代码实例
Python 超简单的聊天程序客户端: import socket, sys host = '10.248.27.23' # host = raw_input("Plz imput des ...

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

小程序，解决代码同步执行问题相关推荐

最新文章

热门文章