如何使 JavaScript 中的 for 循环同步 [重复]答案

【问题标题】：How to make for loop in JavaScript synchronous [duplicate]如何使 JavaScript 中的 for 循环同步 [重复]
【发布时间】：2021-05-18 06:34:55
【问题描述】：

我想在 Javascript 中迭代一个数组，处理一个元素需要一些时间。

我想直到那个元素被处理，等待那个。

var splittedText = ["Hello", "World", "How", "Are", "You", "Today"];
var text = "";

splittedText.forEach((name) => {
  if (name === "Are") {
    setTimeout(() => {
      text = text + "ARE"
    }, 2000)
  } else {
    text = text + name + " ";
  }
  console.log(text)
});

预期输出 - Hello World 你今天好吗。

实际 - Hello World 你今天怎么样

【问题讨论】：

您通过引入setTimeout 专门使其A同步。再次删除它及其同步。你真的在问什么？这在很大程度上暗示了 XY Problem - 您是在问如何在循环中等待异步操作完成？
您不能使forEach 循环同步。它忽略返回值并在当前函数返回之后调用下一个函数。
@ThomasSablik a forEach 仍然是同步的？
@evolutionxbox 是的，forEach 是同步的。但不是里面的功能。而且你不能让forEach 等待异步函数。
那么您的标题会产生误导-您不是在问如何使循环同步（它们已经是！），而是在问如何在循环中等待异步操作。其中有大约一百万个重复项

标签： javascript arrays

【解决方案1】：

您不能让forEach 循环等待异步函数。它忽略返回值并在当前函数返回后调用下一个函数。您可以使用for ... of ... 循环并等待承诺。但await 只能在async 函数内使用（或在async IIFE 内）。

(async function() {
    const splittedText = ["Hello", "World", "How", "Are", "You", "Today"];
    let text ="";

    for (const name of splittedText) {
        if (name === "Are") {
            await new Promise((resolve) => {
                setTimeout(() => {
                    text = text + "ARE";
                    resolve();
                }, 2000);
            });
        } else {
            text += name + " ";
        }  
        console.log(text)
    };
})();

【讨论】：

【解决方案2】：

const firstOperation = (word) => word
const secondOperation = (word) => new Promise(
  (resolve) => setTimeout(
    () => resolve(word), 
    1000
  )
)

const operations = [firstOperation('Hello'), firstOperation('World'), firstOperation('How'), secondOperation('Are'), firstOperation('you'), firstOperation('today')]

Promise.all(operations).then(word => console.log(word))

【讨论】：