等待forEach循环结束以呈现- Javascript

等待forEach循环结束以呈现是一个常见的问题，因为forEach循环是同步执行的，无法等待循环结束后再执行下一步操作。解决这个问题的方法有多种，下面我将介绍两种常用的方法。

方法一：使用Promise和async/await

创建一个Promise对象，用于包装forEach循环。
在Promise对象中使用async/await关键字，将forEach循环改为for...of循环。
在循环体内部使用await关键字，等待每个循环的异步操作完成。
在循环结束后，使用resolve()方法将Promise对象标记为已完成。

示例代码如下：

function waitForEach(array) {
  return new Promise(async (resolve) => {
    for (const item of array) {
      await doSomethingAsync(item);
    }
    resolve();
  });
}

async function main() {
  const array = [1, 2, 3, 4, 5];
  await waitForEach(array);
  console.log('循环结束');
}

main();

方法二：使用递归和回调函数

创建一个递归函数，用于模拟forEach循环的遍历过程。
在递归函数内部，使用setTimeout函数模拟异步操作的延迟。
在每次递归调用时，检查是否已经遍历完数组，如果是则执行回调函数。
在回调函数中执行下一步操作。

示例代码如下：

function waitForEach(array, callback) {
  if (array.length === 0) {
    callback();
    return;
  }

  const item = array.shift();
  doSomethingAsync(item, () => {
    waitForEach(array, callback);
  });
}

function main() {
  const array = [1, 2, 3, 4, 5];
  waitForEach(array, () => {
    console.log('循环结束');
  });
}

main();

以上是两种常用的解决方法，可以根据具体情况选择适合的方法。在实际开发中，还可以结合其他技术和工具，如Promise.all、async/await、Generator函数等，来实现更复杂的控制流程和并发操作。