溫州中墩鄉(xiāng)小程序中解決代碼同步執(zhí)行的問(wèn)題
閱讀 44318 · 發(fā)布日期 2020-08-24 17:26 · 溫州優(yōu)光網(wǎng)絡(luò)科技有限公司|建站|APP小程序制作|做網(wǎng)站SEO推廣優(yōu)化
【摘要】
在做小程序的時(shí)候,是不是經(jīng)常遇到這兩種同步問(wèn)題:1.使用for循環(huán),一個(gè)循環(huán)里面的操作還沒(méi)結(jié)束,下一個(gè)循環(huán)就已經(jīng)開始了。如果循環(huán)之間沒(méi)有互相依賴,問(wèn)題應(yīng)該還不大,但是如果下一個(gè)循環(huán)的開始依賴于上一個(gè)循環(huán)的結(jié)果,那這一系列操作就會(huì)出現(xiàn)問(wèn)題,比如畫圖:for (let index in images) {
//... 【溫州小程序開發(fā),溫州微信公眾號(hào),平陽(yáng)做網(wǎng)站,平陽(yáng)網(wǎng)站建設(shè)公司,平陽(yáng)小程序商城制作,昆陽(yáng)萬(wàn)全做網(wǎng)站,鰲江水頭小程序,蕭江騰蛟微信公眾號(hào),山門順溪南雁海西南麂鳳臥麻步懷溪網(wǎng)絡(luò)網(wǎng)店服務(wù),政采云網(wǎng)店管理服務(wù)】...
在做小程序的時(shí)候,是不是經(jīng)常遇到這兩種同步問(wèn)題:
1.使用for循環(huán),一個(gè)循環(huán)里面的操作還沒(méi)結(jié)束,下一個(gè)循環(huán)就已經(jīng)開始了。
如果循環(huán)之間沒(méi)有互相依賴,問(wèn)題應(yīng)該還不大,但是如果下一個(gè)循環(huán)的開始依賴于上一個(gè)循環(huán)的結(jié)果,那這一系列操作就會(huì)出現(xiàn)問(wèn)題,比如畫圖:
for (let index in images) {
//每畫一張圖,都要在上一張圖畫結(jié)束才能開始,因?yàn)橐?jì)算畫圖位置 ctx.drawImage }
2.調(diào)用服務(wù)器接口訪問(wèn)數(shù)據(jù)、下載圖片等,服務(wù)器還未返回?cái)?shù)據(jù),代碼已經(jīng)繼續(xù)執(zhí)行其他代碼了,這明顯會(huì)出問(wèn)題。
wx.downloadFile({
url: URL, success(wr) {
//如果其他執(zhí)行代碼在success代碼塊里面,還能保證在成功獲取數(shù)據(jù)后正常執(zhí)行 //如果下載功能是共用的,其他操作邏輯肯定就會(huì)抽離出來(lái),這樣就保證不了同步執(zhí)行了。
}
}
);
該怎么解決呢?第一種情況,網(wǎng)上好多解決方案是加sync或者await,還有的加setInterval,這幾種方案我都沒(méi)有選,而且使用嵌套調(diào)用。
/** * 處理圖片 */ handleOneImage: function(ctx, images, idx) {
let that = this;
let oneImage = images[idx];
let pro = new Promise(function(resolve, reject) {
if (oneImage == undefined) {
//畫圖結(jié)束 //執(zhí)行一系列操作 }
else {
//成功畫圖結(jié)束,執(zhí)行下一張圖的操作 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;
//保證獲取圖片信息、畫圖等操作同步進(jìn)行結(jié)束再返回結(jié)果 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;
}
,第二種情況:
其實(shí)在解決第一種情況的代碼中,也用到了解決第二種情況的代碼,使用Promise,有需要的話可以研究下上面的代碼。
這些解決方案也是我的一個(gè)小程序里面的代碼片段,小程名字叫圖作妖,一個(gè)小而美的圖片合成、剪切小程序,歡迎大家體驗(yàn)。
推薦教程:
《微信小程序》以上就是小程序中解決代碼同步執(zhí)行的問(wèn)題的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
微信
分享相關(guān)標(biāo)簽:
小程序本文轉(zhuǎn)載于:
簡(jiǎn)書,如有侵犯,請(qǐng)聯(lián)系[email protected]刪除
上一篇:
小程序畫布canvas隱藏的問(wèn)題解決
下一篇:
小程序支付及退款流程詳解相關(guān)文章相關(guān)視頻微信小程序轉(zhuǎn)發(fā)好友的功能在微信小程序中用戶登錄和登錄狀態(tài)維護(hù)快速實(shí)現(xiàn)一個(gè)微信小程序的Button組件電腦微信小程序設(shè)置全屏的方法是什么?小程序中解決代碼同步執(zhí)行的問(wèn)題(歐陽(yáng)克)微信小程序與CMS后臺(tái)小程序項(xiàng)目介紹預(yù)覽登錄小程序中心 [溫州做小程序]
為您推薦
- 百度智能小程序SWAN 視圖基礎(chǔ)數(shù)據(jù)綁定怎么做 2020-08-24
- 百度智能小程序SWAN 視圖是什么? 2020-08-24
- 百度智能小程序啟動(dòng)頁(yè)面的代碼如何設(shè)置 2020-08-24
- 百度智能小程序SWAN 生命周期是什么 2020-08-24
- 百度智能小程序如何配置全局?jǐn)?shù)據(jù) 2020-08-24
- 百度智能小程序?window、tabBar如何優(yōu)化和調(diào)整 2020-08-24
- 百度智能小程序?pages是什么 2020-08-24
- 百度智能小程序配置界面、路徑如何優(yōu)化 2020-08-24