Event Loop

• Статья на MDN (opens new window)
• Статья на Habr (opens new window)
• Статья на Medium (opens new window)

Описание

• Движок браузера выполняет JavaScript в одном потоке. Он не может поставить обработку события на паузу, переключиться на другое событие, а после возобновить выполнение первого. Все события обрабатываются последовательно и каждое до конца

1. Сначала выполняется синхронный код
2. Потом выполняется асинхронный код: setTimeout, AJAX-запросы к серверу и т.д.

Эволюция методов по работе с асинхронным кодом

1. Callback-функции

setTimeout(function() {
	// асинхронный код
}, 1000);

element.addEventListener('click', function() {
	// асинхронный код
})

2. Promise

fetch('url')
    .then(res => res.json())
    .then(body => console.log(body))

3. Генераторы

function getApi() {
	const response = yield fetch('url');
	const data = yield response.json();
	return data;
}

4. Асинхронные функции

async function getApi(id) {
    const response = await fetch('url');
    const data = await response.json();
    return data;
}