GeezerVison is showing uk.javascript.info — Що буде результатом цього коду?
назад до урокуЩо буде результатом цього коду?
важливість: 5
console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Promise.resolve().then(() => setTimeout(() => console.log(4)));
Promise.resolve().then(() => console.log(5));
setTimeout(() => console.log(6));
console.log(7);
У консолі ми побачимо: 1 7 3 5 2 6 4.
Завдання досить просте, нам потрібно лише знати, як працюють черги мікрозадач і макрозадач.
Подивимося, що відбувається, крок за кроком.
console.log(1);
// Перший рядок виконується негайно і виводить `1`.
// На даний момент черги макрозадач і мікрозадач порожні.
setTimeout(() => console.log(2));
// `setTimeout` додає зворотний виклик функції до черги макрозадач.
// - вміст черги макрозадач:
// `console.log(2)`
Promise.resolve().then(() => console.log(3));
// Зворотний виклик функції додається до черги мікрозадач.
// - вміст черги мікрозадач:
// `console.log(3)`
Promise.resolve().then(() => setTimeout(() => console.log(4)));
// Зворотний виклик функції із `setTimeout(...4)` додається до мікрозадач
// - вміст черги мікрозадач:
// `console.log(3); setTimeout(...4)`
Promise.resolve().then(() => console.log(5));
// Зворотний виклик додається до черги мікрозадач
// - вміст черги мікрозадач:
// `console.log(3); setTimeout(...4); console.log(5)`
setTimeout(() => console.log(6));
// `setTimeout` додає зворотний виклик функції до макрозадач
// - вміст черги макрозадач:
// `console.log(2); console.log(6)`
console.log(7);
// Негайно виводить 7.
Підведемо підсумки,
- Числа
1 і 7 з’являються відразу, тому що прості виклики console.log не використовують жодних черг.
- Потім, після завершення основного потоку коду, запускається черга мікрозадач.
- Він містить команди:
console.log(3); setTimeout(...4); console.log(5).
- З’являються числа
3 і 5, а setTimeout(() => console.log(4)) додає виклик console.log(4) в кінець черги макрозадач.
- Черга макрозадач тепер така:
console.log(2); console.log(6); console.log(4).
- Після того як черга мікрозадач стає порожньою, виконується черга макрозадач. І він виводить
2, 6, 4.
Нарешті, маємо у консолі: 1 7 3 5 2 6 4.