Чи можеш створити простий скрипт, який демонструє, як цикл подій обробляє завдання з поточного стека викликів, черги мікрозавдань та черги зворотних викликів?

Нижче наведено простий скрипт на JavaScript, який демонструє, як цикл подій обробляє завдання зі стека викликів, черги мікрозавдань (наприклад, Promise) та черги зворотних викликів (наприклад, setTimeout). Він виводить порядок, в якому виконуються завдання:

// Демонстрація циклу подій JavaScript

console.log(“Script start”);

// Макрозавдання: setTimeout (черга зворотних викликів)
setTimeout(() => {
console.log(“setTimeout callback”);
}, 0);

// Мікрозавдання: Promise (черга мікрозавдань)
Promise.resolve().then(() => {
console.log(“Promise 1 resolved”);
}).then(() => {
console.log(“Promise 2 resolved”);
});

// Синхронне завдання
console.log(“Synchronous log”);

// Інше макрозавдання: setTimeout (черга зворотних викликів)
setTimeout(() => {
console.log(“Another setTimeout callback”);
}, 0);

// Інше мікрозавдання: Promise (черга мікрозавдань)
Promise.resolve().then(() => {
console.log(“Another promise resolved”);
});

console.log(“Script end”);

Очікуваний вивід

Коли ви запустите цей скрипт у браузері чи Node.js, вивід буде таким:

Script start  
Synchronous log  
Script end  
Promise 1 resolved  
Promise 2 resolved  
Another promise resolved  
setTimeout callback  
Another setTimeout callback

Пояснення

Виконання синхронного коду: Одразу виводяться Script start, Synchronous log та Script end.

Мікрозавдання: Зворотні виклики Promise додаються до черги мікрозавдань і виконуються перед переходом до макрозавдань.

• Виводяться Promise 1 resolved, Promise 2 resolved та Another promise resolved.

Макрозавдання: Зворотні виклики setTimeout обробляються після виконання всіх мікрозавдань.

• Виводяться setTimeout callback та Another setTimeout callback.

Це демонструє, як цикл подій віддає пріоритет завданням з черги мікрозавдань перед чергою зворотних викликів після завершення виконання синхронного коду.

Для більш детальної інформації

Перекладено з: Can you create a simple script that demonstrates how the event loop processes tasks from the call stack, microtask queue, and callback queue?