Асинхронність JavaScript Посібник для тих, хто хоче розібратися

Причини таких обмежень зрозумілі. Уявіть собі, що два паралельні потоки намагаються наввипередки поміняти один і той же вузол у DOM з непередбачуваним результатом. Уявили? Мені теж стало ніяково.

javascript

посібник

Web API і JavaScrtipt двигун працюють незалежно. Web API вирішує, коли функція рухається далі, у чергу викликів (2).

Оточення самостійно вирішує, коли додати переданий їй код у чергу викликів. Функції з черги додаються до стек виконання (виконуються) не раніше, ніж стек викликів закінчить роботу над поточною функцією. Таким чином, стек дзвінків працює синхронно, а web API асинхронно.

Це дуже важливо! Розробнику не потрібно самому контролювати паралельний доступ до ресурсів, асинхронну роботу за нього виконує оточення. Оточення визначають відмінності між браузером і node.js, адже на node.js ми пишемо мережеві програми або звертаємося безпосередньо до жорсткого диска, а Chrome перехоплюємо кліки по кнопках, використовуючи один і той же движок.

У черзі дзвінків не можна скасовувати окремі операції. Це робиться в оточенні (removeEventListener - як приклад).

Можна завантажити стік дзвінків так, щоб він працював нескінченно і наступна функція з черги дзвінків не викликалася. Спробуйте, наприклад, запустити такий код.

Обробник кліка не спрацює, а нескінченний цикл завантажить процесор комп'ютера. Вкладка зависне;)

Але що буде, якщо замість opacity міняти розмір?

Квадратик зависне на час виконання функції. Справа в тому, що CSS-властивість height звертається до DOM. Як ми пам'ятаємо, до DOM можна звертатися лише з одного потоку, щоб не було проблем із паралельним доступом.

Код написаний для наочності та наколіна, в бою застосовувати не рекомендується. Ми ділимо великий шматок роботи на маленькі та виконуємо асинхронно. У цьому інтерфейс не блокується. Для таких розрахунків можна скористатися веб-воркерами.

Про те, як боротися з останньою проблемою, я розповім наступного разу.