您只是忘記告訴 javascript 在 for 循環的每次迭代之間“等待”超時。那么發生了什么，javascript 將運行 for 循環，同時安排三個超時，然后這三個超時全部立即消失。
如果您像這樣添加等待，那么它將按您的預期工作。
(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，因為 .forEach() 不適用于異步函數。我還將整個內容包裝在 async?IIFE中，因為那里不允許頂級等待 - 根據您放置此代碼的位置，您可能不必將其包裝在 async IIFE 中。
編輯
剛剛意識到，您在原始問題中的任何地方都沒有使用異步/等待內容。我不知道你是否已經了解了它，但你不必知道它來解決這個特定的問題。
這是另一種無需異步/等待的方法。
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")
? ? })
});
這基本上是在循環內構建一個承諾鏈。如果您“展開”循環，它將如下所示：
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") })
因為我們保留了對最后一個承諾的引用，并且我們不斷地附加到它的末尾，所以我們附加的每件新事情都會在最后一件事情完成后發生。
