您只是忘記告訴 javascript 在 for 循環(huán)的每次迭代之間“等待”超時。那么發(fā)生了什么，javascript 將運(yùn)行 for 循環(huán)，同時安排三個超時，然后這三個超時全部立即消失。
如果您像這樣添加等待，那么它將按您的預(yù)期工作。
(async function() {
? let arr = [1, 2, 3];
? for (let x of arr) {
? ? await (function() { // <-- await added
? ? ? return new Promise((resolve, reject) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? console.log("111")
? ? ? ? ? resolve(true)
? ? ? ? }, 3000);
? ? ? })
? ? })()
? ? .then(() => {
? ? ? console.log("222")
? ? })
? }
})()
我切換到 for-of，因?yàn)?.forEach() 不適用于異步函數(shù)。我還將整個內(nèi)容包裝在 async?IIFE中，因?yàn)槟抢锊辉试S頂級等待 - 根據(jù)您放置此代碼的位置，您可能不必將其包裝在 async IIFE 中。
編輯
剛剛意識到，您在原始問題中的任何地方都沒有使用異步/等待內(nèi)容。我不知道你是否已經(jīng)了解了它，但你不必知道它來解決這個特定的問題。
這是另一種無需異步/等待的方法。
let arr = [1, 2, 3];
let promise = Promise.resolve();
arr.forEach((x,i) => {
? promise = promise
? ? .then(function() {
? ? ? return new Promise((resolve, reject) => {
? ? ? ? setTimeout(() => {
? ? ? ? ? console.log("111")
? ? ? ? ? resolve(true)
? ? ? ? }, 3000);
? ? ? })
? ? })
? ? .then(() => {
? ? ? console.log("222")
? ? })
});
這基本上是在循環(huán)內(nèi)構(gòu)建一個承諾鏈。如果您“展開”循環(huán)，它將如下所示：
promise = Promise.resolve()
promise = promise
? .then(() => /* wait 3000 ms and log "111" */)
? .then(() => { console.log("222") })
? .then(() => /* wait 3000 ms and log "111" */)
? .then(() => { console.log("222") })
? .then(() => /* wait 3000 ms and log "111" */)
? .then(() => { console.log("222") })
因?yàn)槲覀儽Ａ袅藢ψ詈笠粋€承諾的引用，并且我們不斷地附加到它的末尾，所以我們附加的每件新事情都會在最后一件事情完成后發(fā)生。
