Как Javascript Async работает с циклами?

Question

Я пытаюсь понять, как работает асинхронный в JavaScript.и я не могу обработать 1 вещь, которая создает функцию async: async с другими генераторами обещаний и обратных вызовов, или webAPI?

Вот код.Если я использую функцию settimeout, все работает правильно, но если я использую цикл, что-то работает непредсказуемо;затем я использую результат settimeout, показывающий 1 на 1 с тайм-аутом, но с циклическим результатом, показывающим одновременно

function timeout(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}
async function sleep() {
  console.time("abc");
  await timeout(3000);
  console.timeEnd("abc");
}

sleep();

console.time();
var z = 1;
for (let i = 1; i < 10000; i++) {
  for (let j = 1; j < 10000; j++) {
    z *= j;
  }
  z *= i;
}
console.timeEnd();


//second var

function second(ms) {
  return new Promise(resolve => {
    var z = 1;
    for (let i = 1; i < 50000; i++) {
      for (let j = 1; j < 50000; j++) {
        z *= j;
      }
      z *= i;
    }
    resolve();
  });
}

// function timeout(ms) {
//   return new Promise(resolve => setTimeout(resolve, ms));
// }
async function sleep() {
  console.time("abc");
  await second();
  console.timeEnd("abc");
}

sleep();

console.time();
var z = 1;
for (let i = 1; i < 10000; i++) {
  for (let j = 1; j < 10000; j++) {
    z *= j;
  }
  z *= i;
}
console.timeEnd();

// первый результат, показывающий 1 на 1 с тайм-аутом

по умолчанию: 932.822998046875мс

abc: 3000,555908203125мс

// второй результат, показывающий одновременно

по умолчанию: 913,716064453125ms

abc: 4396,77490234375ms

Answer 1

Обычные циклы for, которые вы используете, не ждут разрешения Promise, прежде чем перейти к следующей итерации. Вы можете использовать библиотеку типа bluebird, которая оптимизирована для обработки обещаний, особенно для коллекций, или использовать цикл for (i in arr){}.