Разкажи ми за цикъла на събитията (event loop)…

Цикълът на събитията е основата на асинхронната работа в JavaScript. Той управлява изпълнението на кода, обработката на събития и взаимодействието с външния свят.

Основни компоненти:

Heap (Куча): Област от памет за разпределяне на обекти.
Stack (Стек): Място, където се съхраняват контекстите на изпълнение на функциите. При извикване на функция тя се поставя в стека, а при завършване — се премахва.
Web API: Интерфейси, предоставени от браузъра (DOM, AJAX, Timers и др.). Те обработват асинхронните операции.
Callback Queue (Опашка за обратни повиквания): Опашка от съобщения, свързани със събития. Web API поставят тук обратните повиквания на завършените асинхронни операции.
Цикъл на събитията (Event Loop): Постоянно следи стека и опашката за обратни повиквания. Ако стекът е празен, взема първото обратното повикване от опашката и го поставя в стека за изпълнение.

Процес:

Синхронният код се изпълнява в стека.
Асинхронните операции (setTimeout, fetch) се изпращат към Web API.
Когато асинхронната операция приключи, нейното обратното повикване се поставя в опашката за обратни повиквания.
Цикълът на събитията чака, докато стекът стане празен.
Когато стекът е празен, цикълът взема първото обратното повикване от опашката и го поставя в стека, където се изпълнява.

Пример с setTimeout:

console.log('Начало');

setTimeout(() => {
  console.log('Вътре в setTimeout');
}, 0);

console.log('Край');

Изходът ще бъде:

Начало
Край
Вътре в setTimeout

Въпреки таймаута от 0 мс, обратното повикване на setTimeout се изпълнява след синхронния код, защото попада в опашката и чака изпразването на стека.

В Node.js също съществува цикъл на събития, но с някои разлики във фазите на обработка на опашките.

Разкажи ми за цикъла на събитията (event loop).