Що таке черга завдань (task queue)?
Черга завдань (Task Queue) - це структура даних, у якій зберігаються завдання (callback'и), що очікують виконання після звільнення стека викликів (Call Stack). Вона є ключовим елементом механізму Event Loop (циклу подій) у JavaScript.
Ключова ідея
JavaScript - однопотокова мова, вона може виконувати тільки одне завдання за раз.
Коли рушій зайнятий виконанням функцій у стеку викликів, інші завдання, наприклад, обробники кліків, setTimeout, fetch тощо, чекають своєї черги у черзі завдань (task queue).
Коли стек викликів стає порожнім, Event Loop бере перше завдання з черги і поміщає його в стек, і так триває нескінченно.
Приклад
console.log('1');
setTimeout(() => {
console.log('2');
}, 0);
console.log('3');Покроково:
console.log('1')- виконується одразу. -> виводить1.setTimeout(...)- браузер ставить таймер. Після спрацювання таймера колбек потрапляє в чергу завдань (task queue), а не виконується одразу.console.log('3')- виконується. -> виводить3.- Коли стек викликів порожній, Event Loop бере завдання з черги (колбек з
setTimeout) і поміщає його в стек. -> виводить2.
Вивід у консолі:
1
3
2Черга завдань vs Мікрозавдання
У JavaScript є дві черги:
| Тип черги | Джерело завдань | Коли виконуються |
|---|---|---|
| Task Queue (macro tasks) | setTimeout, setInterval, події DOM, завершений з помилкою fetch.then тощо | Після очищення стека і всіх мікрозавдань |
| Microtask Queue | Promise.then, queueMicrotask, MutationObserver | Одразу після поточного завдання, до наступного макрозавдання |
Приклад з мікрозавданнями
console.log('A');
setTimeout(() => console.log('B'), 0);
Promise.resolve().then(() => console.log('C'));
console.log('D');Порядок виводу:
A
D
C
BПояснення:
A,D-> виконуються одразу (стек викликів).C-> мікрозавдання -> виконується одразу після очищення стека.B-> макрозавдання -> виконується після всіх мікрозавдань.
Підсумок
| Термін | Опис |
|---|---|
| Task Queue | Черга макрозавдань - зберігає колбеки від setTimeout, подій тощо |
| Microtask Queue | Черга мікрозавдань - для Promise.then, queueMicrotask |
| Event Loop | Механізм, що стежить за стеком і чергами, і вирішує, що виконувати далі |
| Порядок | Спочатку виконується стек -> мікрозавдання -> макрозавдання |
Коротка відповідь
Для співбесідиКоротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.