Асинхронный JavaScript

.className {
transition: color 10s linear;
}
function animate(color) {
element.style.color = color;
}
animate(“blue”);
setTimeout(() => animate(“red”), 10);
.className
.className

{ JavaScript }
однопоточный
не блокирующий
асинхронный

{ Концепция жизненного цикла }

{ Stack }
структура, описывающая порядок выполнения кода

{ Heap }
это ссылка на определённую неструктурированную область памяти

{ Event Queue }
список событий, подлежащих обработке
Каждое событие ассоциируется с некоторой функцией. Когда на стеке освобождается достаточно места, событие извлекается из очереди и обрабатывается

Stack
function fizz() {
throw 'Error';
}
function bazz() {
fizz();
}
function fizzbazz() {
fizz();
bazz();
}
fizzbazz();
Main
fizzbazz
fizz
bazz
fizz

{ Переполнение стека }

Stack
function bazz() {
bazz();
}
bazz();
Main
bazz
bazz
bazz
bazz
bazz
bazz
bazz

{ Очередь событий }

Main
fizzbazz
log(‘fb’)
setTimeout
callback
callback
callback
log(‘cb’)

function bazz() {
setTimeout(bazz, 0);
}
bazz();
Main
bazz
setTimeout
bazz
bazz
bazz
setTimeout
bazz
bazz
bazz

Main
setTimeout
bazz
bazz
bazz
bazz
bazz
setTimeout
bazz

Queue

{ Task Queue }

Task Queue
Stack

{ Microtask Queue }

button.addEventListener('click', () => {
Promise.resolve().then(() => console.log('Promise 1'));
console.log('Click 1');
});
button.addEventListener('click', () => {
Promise.resolve().then(() => console.log('Promise 2'));
console.log('Click 2');
});
button.click();

Microtask Queue
Stack

{ Render Queue }

Render Queue
RAF
Stack
Style
Layout
Painting
button.addEventListener('click', () => {
element.style.color = ‘red';
element.style.color = 'black';
element.style.color = ‘red';
element.style.color = 'black';
element.style.color = ‘red';
element.style.color = 'black';
});

button.addEventListener('click', () => {
element.style.color = 'red';
element.style.transition = 'color 1s linear'; element.style.color = 'black';
});
button.addEventListener('click', () => {
element.style.color = 'red';
element.style.transition = 'color 1s linear';
requestAnimationFrame(() => {
element.style.color = 'black';
});
});

button.addEventListener('click', () => {
element.style.color = 'red';
element.style.transition = 'color 1s linear'; getComputedStyle(element).color;
element.style.color = 'black';
});
button.addEventListener('click', () => {
element.style.color = 'red';
element.style.transition = 'color 1s linear';
requestAnimationFrame(() => {
requestAnimationFrame(() => {
element.style.color = 'black';
});
});
})