JS - Почему ожидают не работают в классе

Question

Мне нужно подождать некоторое время внутри функции класса. Я пытался адаптировать Джонас В. ответ: https://jsfiddle.net/5wk2cohe/

const sleep = ms => new Promise(res => setTimeout(res, ms));

class K {
  run(n) {
    (async function() {
      document.body.textContent = n;
      await sleep(1000);
    })();
  }
}

var v = new K();
for (let n = 0; n < 4; n++) {
  v.run(n);
}

Но подсчет сразу подсказывает 3. Если я запускаю https://jsfiddle.net/tctxcn9o/ Я вижу счетчик как исключение:

const sleep = ms => new Promise(res => setTimeout(res, ms));

 (async function() {
   for(let n = 0; n < 4; n++) {
     document.body.textContent = n;
     await sleep(1000);
   }
})();

Что я делаю не так?

[Обновление] Некоторая справка: В моем родном городе очень популярна очень старая программа под названием JavaKara, помогающая учащимся в старших классах учиться кодировать:

Понять, как движется божья коровка, очень полезно для понимания и обнаружения вашей ошибки. Поэтому я пытаюсь подождать некоторое время после каждого шага божьей коровки.

Answer 1

Как сказал Эль Аутар Хамза , вы создаете 4 асинхронные задачи, каждая из которых запускается мгновенно. Чтобы отложить следующую задачу, вам нужно использовать await внутри цикла и заставить функцию run возвращать Promise, что-то вроде этого:

const sleep = ms => new Promise(res => setTimeout(res, ms));

class K {
  async run(n) {
    document.body.textContent = n;
    await sleep(1000);
  }
}

(async function() {
  var v = new K();
  for (let n = 0; n < 4; n++) {
    await v.run(n);
  }
})();

Answer 2

В первом примере вы создаете 4 async функции, которые не связаны друг с другом, поэтому ни одна из них не должна ждать другую.

В то время как во втором примере вы создаете функцию 1 async, где выражение await заставляет выполнение функции async приостанавливаться, пока не будет выполнено обещание sleep.