Поглиблене розуміння асинхронності в JavaScript: Черги та Стеки

3 Березня 2024 в 12:44 42

JavaScript є мовою програмування, яка в основному використовується для створення інтерактивних веб-сторінок. Однією з ключових особливостей JavaScript є його асинхронний характер, що дозволяє виконувати довготривалі операції, такі як запити до мережі, без блокування головного потоку. Але для повного розуміння, як саме працює асинхронність у JavaScript, необхідно зрозуміти два ключові поняття: стек викликів (call stack) та чергу мікрозавдань (microtask queue).

Стек викликів

Стек викликів — це структура даних, яка використовується для зберігання інформації про активні на даному момент виклики функцій. Коли функція викликається, її запис додається до стеку. Коли функція завершує своє виконання, її запис вилучається зі стеку. JavaScript є однопоточним, що означає, що в будь-який момент часу може виконуватися лише одна задача.

Черга мікрозавдань

Черга мікрозавдань в JavaScript використовується для управління асинхронними операціями. Коли асинхронна операція завершується, обробник (callback) цієї операції додається до черги мікрозавдань. JavaScript періодично перевіряє цю чергу і, якщо стек викликів порожній, переміщає обробник з черги мікрозавдань до стеку викликів для виконання.

Приклад асинхронності в коді

Розглянемо детальніше взаємодію між стеком викликів і чергою мікрозавдань на прикладі. В коді використовуються функції setTimeout, яка є асинхронною і додає свій callback до callback queue (черги зворотних викликів, яка є частиною task queue), і Promise.resolve, обробник якого додається до черги мікрозавдань.

function showMsg(msg) {
    console.log(msg);
}
showMsg('1 - Синхронний виклик');
setTimeout(() => {
    showMsg('2 - Заплановано через setTimeout');
}, 0);
Promise.resolve().then(() => showMsg('3 - Обіцянка виконана'));
showMsg('4 - Синхронний виклик після асинхронного коду');

function showMsg(msg) {

console.log(msg);

}

showMsg('1 - Синхронний виклик');

setTimeout(() => {

showMsg('2 - Заплановано через setTimeout');

}, 0);

Promise.resolve().then(() => showMsg('3 - Обіцянка виконана'));

showMsg('4 - Синхронний виклик після асинхронного коду');

Порядок виконання коду буде наступним:

‘1 – Синхронний виклик’ виводиться негайно, оскільки це синхронна операція.
‘4 – Синхронний виклик після асинхронного коду’ також виводиться негайно після першого виклику, незважаючи на присутність асинхронного коду між цими викликами. Це тому, що асинхронні операції ще не завершились і не впливають на синхронний потік виконання.
‘3 – Обіцянка виконана’ виводиться після того, як JavaScript engine виконає синхронний код і перейде до обробки черги мікрозавдань, де знаходиться виконана обіцянка.
Нарешті, ‘2 – Заплановано через setTimeout’ виводиться після всього іншого, оскільки завдання з setTimeout потрапляють у звичайну чергу задач, яка обробляється після черги мікрозавдань.

Значення асинхронності

Асинхронність у JavaScript дозволяє створювати відгукові інтерфейси, де користувач може продовжувати взаємодію зі сторінкою, поки виконуються довготривалі завдання, такі як запити до сервера. Це одна з причин, чому JavaScript став таким популярним для розробки веб-додатків.

Висновок

Розуміння стеку викликів і черги мікрозавдань є фундаментальним для ефективної роботи з асинхронним кодом у JavaScript. Це дозволяє розробникам краще контролювати потік виконання програми, оптимізувати взаємодію з користувачем і уникати помилок, пов’язаних з асинхронністю.