JavaScript 同步 for 循环

在 JavaScript 中，for 循环是一种非常常见的迭代语句，用来重复执行某些代码。在某些情况下，需要在循环内部执行一些异步操作，并且需要等待这些异步操作完成后才能进行下一次循环。这时候就需要使用同步 for 循环。

同步 for 循环的实现方式

同步 for 循环可以通过使用 JavaScript 的 Promise 对象和 async/await 声明式异步语法来实现。

Promise

在每次循环迭代中，使用 Promise 对象来执行异步操作，将 Promise 对象添加到数组中，并使用 Promise.all() 方法等待所有异步操作完成后再进行下一次循环迭代。

const promiseArray = [];
for (let i = 0; i < 10; i++) {
  const promise = new Promise((resolve) => {
    setTimeout(() => {
      resolve(i);
    }, Math.random() * 1000);
  });
  promiseArray.push(promise);
}
Promise.all(promiseArray).then((results) => {
  console.log(results);
});

async/await

使用 async/await 声明式异步语法，将异步操作封装在一个 async 函数中，在每次循环迭代中使用 await 关键字等待异步操作完成后再进行下一次循环迭代。

const delay = (timeout) => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve();
    }, timeout);
  });
};
const start = async () => {
  for (let i = 0; i < 10; i++) {
    await delay(Math.random() * 1000);
    console.log(i);
  }
};
start();

同步 for 循环的优缺点

优点

同步 for 循环便于在循环迭代中执行异步操作，并保持循环的同步性，可以确保异步操作完成后再进行下一次循环迭代。

缺点

同步 for 循环可能会造成程序的阻塞，由于每次循环迭代都需要等待异步操作完成后再进行下一次循环迭代，可能会导致程序执行时间过长。此外，使用同步 for 循环处理大量数据时，内存占用量可能会增加，因为需要存储异步操作的 Promise 对象或 async 函数的调用栈。