@narem

Приоритет в асинхронном коде, как это работает?

let button = document.querySelector('.one')

button.addEventListener('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 1'));
        console.log('Listener 1');
});
button.addEventListener('click', () => {
        Promise.resolve().then(() => console.log('Resolve promise 2'));
        console.log('Listener 2');
});
button.click();


Если просто запустить этот код, то событие вызовет button.click() и вывод в консоль будет

"Listener 1"
"Listener 2"
"Resolve promise 1"
"Resolve promise 2"

А если вызвать через клик то будет
"Listener 1"
"Resolve promise 1"
"Listener 2"
"Resolve promise 2"

Не могу понять почему такая разница в срабатывание, подскажите плз.
  • Вопрос задан
  • 74 просмотра
Решения вопроса 1
Alexandroppolus
@Alexandroppolus
кодир
1) Просто вызов: оба хендлера последовательно запускаются в одном и том же синхронном коде (в текущем таске), ставят в очередь 2 микротаска.

2) Через клик: на каждый хендлер создается отдельный таск в event-loop, таски отрабатывают по очереди, каждый из тасков создает по одному микротаску, последний выполняется до перехода управления к след. таску.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы