在做小程式的時候,是不是常常遇到這兩種同步問題:
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中文網其他相關文章!