Асинхронный JavaScriptПро стоящих в очереди и отсроченные обещания

Андрей Кулешов

Почему JavaScript вновь удивляет Си-программистов...

▪ То, чему нас учили в институте

▪ Почему в яваскрипт всё совсем по другому.

Карта выполнения кода в Си-подобных языках

▪ Исполнение нашего кода может быть прервано в любое время соседним потоком кода

▪ Чтобы безопасно использовать несколько потоков, мы изучали мьютексы, семафоры...

Карта выполнения JavaScript в web-браузерах

Получили задачу

Выполнили задач

у

Посмотрели, есть

ли ещё задачи

Остановили работ

уПовторили.

Очередь выполнения

▪ Когда выполняется код JavaScript – он не может быть прерван никаким другим кодом

▪ Мы можем только уведомить движок, что мы хотели бы выполнить некоторый новый кусок кода, и поставить его в очередь выполнения

▪ Постановка в очередь выполнения – операция достаточно дорогая; кроме того, в браузерах ни при каких условиях не возможно мгновенное выполнение поставленного в очередь кода

Кто может ставить код в очередь?

▪ Пришедшие к браузеру из внешнего мира события:

- пришедший запрос (ответ) по сети- события от пользователя (щелчки мышью, клавиатурный ввод... многое)

Событие перерисоки браузера – стоит в той же очереди (хотя, в современных браузерах, и со значительно большим приоритетом)

▪ Из кода javascript:

- setTimeout, setInterval

Как работает setTimeout

▪ Не так, как в си-языках

▪ Код внутри таймаута не выполняется через заданное время, а ставится в очередь выполенения. А выполняется, соответственно, по возможности.

▪ Код внутри setTimeout выполняется асинхронно, превращая вызывающую функцию в целом в асинхронную

Ну... это здорово?..

▪ В сферическом вакууме модель исполения яваскрипта была бы идеальной

▪ Большой плохой момент - взаимодействие с пользователем живет в том же самом потоке

▪ Пока выполняется JavaScript код – не будет производиться никакая отрисовка страницы (хотя современные браузеры зачастую всё же пытаются что-то рисовать...)

▪ Но уж совершенно точно не будут выполняться никакие события пользовательского интерфейса

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

▪ Функция называется асинхронной, когда она откладывает своё выполнение (или выполнение следующих действий) и ставит его в очередь задач

▪ Наш код, который мы хотим выполнить после окончания функции Х, передается в функции Х как функция обратного вызова (callback)

Когда функции становятся асинхронными:

▪ В первую очередь – взаимодействующие с внешним миром (читай – AJAX)

▪ Во вторую очередь – функции реакции на события от пользователя

▪ В третью очередь – долговременные функции, блокирующие взаимодействие с пользователем – мы сами делаем их асинхронными

▪ Синхроннаяfunction load() { var data = //(идём на сервер) //курим, ждём ответа return data ;}var result = load();print(result)

▪ Асинхроннаяfunction load(callback) { var data = goToServerBrowserFunction( callback); //и там внутри происходит //callback(someData)}load(function (result) { print(result);});

Асинхронный однажды – асинхронный всегда

▪ Всё функции, укушенные асинхронной функцией, сами становятся асинхронными

▪ Нет никакого пути вернуть асинхронную функцию в неасинхронный режим

Демо

▪ setTimeout(0)

▪ setTimeout(500) и цикл длиной в секунду

▪ создание большого количества элементов в синхронном режиме, в асинхронном режиме – поэлементно и в асинхронном режиме - группами

Шаблон отложенных обещаний

▪ deferred – шаблон проектирования javascipt кода

▪ Суть в двух словах: есть некоторое событие; когда оно выполнено – нужно выполнить наши обработчики этого события

▪ И нам неважно, наступило ли уже это событие или ещё нет

▪ Но нам обещают, что как только станет можно – нас позовут

jQuery $.Deffered

▪ Можно подписаться на его события- always- done- fail

▪ Им можно управлять- resolve- reject

▪ У него можно получить объект promise (“обещание”)у него такие же события, но им нельзя управлятьОн нужн для того, чтобы отдать его наружу, из нашего класса, чтобы на него могли подписаться, но никто не мог управлять поведением вместо нас

Будет ли в JavaScript классическая многопоточность?

▪ Нет, насколько это зависит от комитета ECMA

▪ Workers – единственная альтернатива в ближайшее время

Workers

▪ Отдельный файл с JavaScript-кодом, который может быть запущен в отдельном потоке

▪ Обмен данными с вызывающим кодом – только через механизм сообщений (подписка на события)

▪ Воркер не имеет доступа к вызывающему контексту (переменные и т.п.), не имеет доступа к DOM страницы

Есть ещё Node.js…Но для докладчика это Terra Incognita

Интересное чтение

▪ Event loops in JS specification

▪ Async JavaScript: Build More Responsive Apps with Less Code by Trevor Burnham

▪ High Performance JavaScript by Nicholas C. Zakas

▪ StackOverflow – exceptions from the rule

Вопросы?Внимательно слушаю!

Андрей Кулешов

kaa-tula@ya.ru

akuleshov.tula

Специально для http://GetDev.NET