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

Сентябрь 5, 2022

Главная
Алгебра
Асинхронный JavaScript

Содержание

2. .className { transition: color 10s linear; } function animate(color) { element.style.color = color; } animate(“blue”); setTimeout(()
3. { JavaScript } однопоточный не блокирующий асинхронный
4. { Концепция жизненного цикла }
5. { Stack } структура, описывающая порядок выполнения кода
6. { Heap } это ссылка на определённую неструктурированную область памяти
7. { Event Queue } список событий, подлежащих обработке Каждое событие ассоциируется с некоторой функцией. Когда на
9. Stack function fizz() { throw 'Error'; } function bazz() { fizz(); } function fizzbazz() { fizz();
10. { Переполнение стека }
11. Stack function bazz() { bazz(); } bazz(); Main bazz bazz bazz bazz bazz bazz bazz
12. { Очередь событий }
13. Main fizzbazz log(‘fb’) setTimeout callback callback callback log(‘cb’)
14. function bazz() { setTimeout(bazz, 0); } bazz(); Main bazz setTimeout bazz bazz bazz setTimeout bazz bazz
15. Main setTimeout bazz bazz bazz bazz bazz setTimeout bazz
16. Queue
17. { Task Queue }
18. Task Queue Stack
19. { Microtask Queue }
20. button.addEventListener('click', () => { Promise.resolve().then(() => console.log('Promise 1')); console.log('Click 1'); }); button.addEventListener('click', () => { Promise.resolve().then(()
21. Microtask Queue Stack
22. { Render Queue }
23. Render Queue RAF Stack Style Layout Painting button.addEventListener('click', () => { element.style.color = ‘red'; element.style.color =
24. button.addEventListener('click', () => { element.style.color = 'red'; element.style.transition = 'color 1s linear'; element.style.color = 'black'; });
25. button.addEventListener('click', () => { element.style.color = 'red'; element.style.transition = 'color 1s linear'; getComputedStyle(element).color; element.style.color = 'black';
27. Скачать презентацию

Слайд 2

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

=> animate(“red”), 10);

.className

Слайд 3

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

Слайд 4

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

Слайд 5

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

Слайд 6

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

Слайд 7

{ Event Queue }
список событий, подлежащих обработке
Каждое событие ассоциируется с некоторой

функцией. Когда на стеке освобождается достаточно места, событие извлекается из очереди и обрабатывается

Слайд 8

Слайд 9

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

bazz();
}
fizzbazz();

Main

fizzbazz

fizz

bazz

fizz

Слайд 10

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

Слайд 11

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

Слайд 12

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

Слайд 13

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

Слайд 14

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

Слайд 15

Main
setTimeout
bazz
bazz
bazz
bazz
bazz
setTimeout
bazz

Слайд 16

Queue

Слайд 17

{ Task Queue }

Слайд 18

Task Queue
Stack

Слайд 19

{ Microtask Queue }

Слайд 20

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();

Слайд 21

Microtask Queue
Stack

Слайд 22

{ Render Queue }

Слайд 23

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';
});

Слайд 24

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';
});
});

Слайд 25

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';
});
});
})

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

Содержание

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

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

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

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

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

{ Event Queue }список событий, подлежащих обработкеКаждое событие ассоциируется с некоторой

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

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

Stackfunction bazz() { bazz();} bazz();Mainbazzbazzbazzbazzbazzbazzbazz

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

Mainfizzbazzlog(‘fb’)setTimeoutcallbackcallbackcallbacklog(‘cb’)

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

MainsetTimeoutbazzbazzbazzbazzbazzsetTimeoutbazz

Queue

{ Task Queue }

Task QueueStack

{ Microtask Queue }

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

Microtask QueueStack

{ Render Queue }

Render QueueRAFStackStyleLayoutPaintingbutton.addEventListener('click', () => { element.style.color = ‘red'; element.style.color = 'black';

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

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

Похожие презентации

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

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

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

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

{ Event Queue }
список событий, подлежащих обработке
Каждое событие ассоциируется с некоторой

Stack
function fizz() {
throw 'Error';
}
function bazz() {
fizz();
}
function fizzbazz() {
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

Task Queue
Stack

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

Microtask Queue
Stack

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

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

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