Не получается сделать асинхронную функцию через async await?

Question

[Михаил]

Всем привет!
Что-то не получается сделать асинхронную функцию через async await.
Я хочу чтобы сначала (1 очередь) окрасился зелёный квадрат, потом (2 очередь) появилось слово Привет, а потом (3 очередь) - окрасился красный квадрат.
Сделал функцию async await, но что-то видимо не так...
Прошу подсказать, кто может.
Заранее спасибо!

здесь пример
https://codepen.io/mk3mk/pen/JjoJevR?editors=0010

Comments

[Алексей Ярков]

И где там использован await?

[Михаил]

перед try ставлю, не работает

[Леонид Князев]

перед try ставлю, не работает

Значит вы плохо читали документацию по async / await

Ключевое слово await заставит интерпретатор JavaScript ждать до тех пор, пока промис справа от await не выполнится. После чего оно вернёт его результат, и выполнение кода продолжится.

Answer 1

[Алексей Ярков]

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

div2.style = 'background:red';//должно выполниться первым
let info = document.querySelector('#info');
async function myFunc() {
  await sleep(1000);
  info.innerHTML = 'Привет!';//должно выполниться вторым
  await sleep(1000);
  div1.style = 'background:green';
}

myFunc();

Comments

[Михаил]

спасибо!

[Алексей Ярков]

Михаил, на здоровье ))