在JS循環(huán)中使用async/await的方法
async / await是ES7的重要特性之一，也是目前社區(qū)里公認(rèn)的優(yōu)秀異步解決方案。目前，async / await這個(gè)特性已經(jīng)是stage 3的建議，可以看看TC39的進(jìn)度，本篇文章將分享在JS循環(huán)中使用async/await的方法.
在開發(fā)maty.js時(shí)，遇到一個(gè)數(shù)組任務(wù)，數(shù)組項(xiàng)是內(nèi)部異步執(zhí)行的函數(shù)，期望是同步依次執(zhí)行每項(xiàng)函數(shù)，每項(xiàng)函數(shù)執(zhí)行完本身的異步任務(wù)后，繼續(xù)下一項(xiàng)。
剛開始單純使用map來(lái)循環(huán)執(zhí)行，并且await每項(xiàng)函數(shù)。如下所示：
starters.map(async (fn, i)=> {
console.log('++++++++++: ', i)
await fn(ctx);
});
結(jié)果是依次先輸出了索引i，而不是阻塞每次循環(huán)，按期望執(zhí)行。
搬出Google大法，可以看出對(duì)在 for…of 循環(huán)語(yǔ)法中使用await是有效的。
for (const fn of starters) {
await fn(ctx);
}
同時(shí)文章中指出使用Promise.all，是無(wú)法解決當(dāng)前問(wèn)題的，因?yàn)閍ll方法是并行運(yùn)行的。很奇怪為什么沒有串行執(zhí)行的原生方法。
總結(jié)
以上所述是小編給大家介紹的在JS循環(huán)中使用async/await的方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JS驗(yàn)證輸入的是否是數(shù)字及保留幾位小數(shù)問(wèn)題
這篇文章主要介紹了JS驗(yàn)證輸入的是否是數(shù)字及保留幾位小數(shù)問(wèn)題，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-05-05
這篇文章主要介紹了JavaScript、C# URL編碼總結(jié),注意包括了encodeURI、decodeURI、encodeURIComponent、decodeURIComponent等使用需要的朋友可以參考下2017-01-01
微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能（函數(shù)防抖）
這篇文章主要介紹了微信小程序防止多次點(diǎn)擊跳轉(zhuǎn)和防止表單組件輸入內(nèi)容多次驗(yàn)證功能（函數(shù)防抖）,需要的朋友可以參考下2019-09-09
詳解JavaScript中的Object.is()與"==="運(yùn)算符總結(jié)
這篇文章主要介紹了詳解JavaScript中的Object.is()與"==="運(yùn)算符總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
這篇文章主要介紹了javascript高級(jí)定時(shí)器，針對(duì)javascript的代碼隊(duì)列進(jìn)行詳細(xì)解析，感興趣的小伙伴們可以參考一下2015-12-12
JS實(shí)現(xiàn)的新聞列表自動(dòng)滾動(dòng)效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)的新聞列表自動(dòng)滾動(dòng)效果,涉及javascript基于時(shí)間函數(shù)的頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2019-01-01
JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能
在項(xiàng)目開發(fā)中經(jīng)常會(huì)遇到表單提交功能，今天小編抽空給大家分享JS實(shí)現(xiàn)提交表單前的數(shù)字及郵箱校檢功能，需要的朋友參考下吧2017-11-11
js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果
本文主要介紹了js+css3實(shí)現(xiàn)旋轉(zhuǎn)效果的方法。具有一定的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-01-01
Bootstrap3使用typeahead插件實(shí)現(xiàn)自動(dòng)補(bǔ)全功能
這篇文章主要介紹了Bootstrap3使用typeahead插件實(shí)現(xiàn)自動(dòng)補(bǔ)全功能的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
JavaScript事件流包含捕獲、目標(biāo)、冒泡三個(gè)階段,本文就來(lái)介紹了JavaScript事件流的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2025-09-09