Понимание синхронного и асинхронного JavaScript – часть 1

Синхронный и асинхронный вводят в заблуждение понятия в JavaScript, особенно для начинающих. Две или более вещи являются синхронными, когда они происходят одновременно (синхронно), и асинхронными, когда они не синхронизируются (не синхронизированы).

Хотя эти определения легко принять, на самом деле все сложнее, чем кажется. Нам необходимо учитывать, что именно синхронизировано, а что нет.

Вы, вероятно, вызываете обычную функцию в JavaScript синхронно, верно? И если это что-то вроде SetTimeout () или AJAX с которым вы работаете, вы будете называть его асинхронным, да? Что если я скажу тебе это обе являются асинхронными в пути?

Чтобы объяснить Почемунам нужно обратиться к мистеру Икс за помощью.

Читайте также: 15 методов DOM Manipulation JavaScript для веб-разработчиков

Сценарий 1 – г-н Х пытается синхронность
Вот настройки:

1. Мистер Х – это тот, кто может ответить на сложные вопросы и выполнить любую запрошенную задачу.
2. Единственный способ связаться с ним через телефонный звонок.
3. Какой бы вопрос или задание вы не получили, чтобы попросить господина Икс помочь выполнить его; ты звонишь ему.
4. Мистер Х дает вам ответ или сразу же выполняет задание и сообщает, что оно выполнено.
5. Вы подавляете приемник, чувствуя себя довольным, и выходите в кино.

То, что вы только что выполнили, было синхронным (назад и вперед) общением с мистером X.
  Он слушал, когда вы задавали ему свой вопрос, а вы слушали, когда он отвечал на него.
Сценарий 2 – Мистер Икс не доволен синхронностью
Поскольку г-н Х очень эффективен, он начинает получать гораздо больше звонков. Так что происходит, когда вы звоните ему, но он уже занят разговором с кем-то еще? Вы не сможете задать ему свой вопрос – пока он не получит ваш звонок. Все, что вы услышите, это занятый тон.

Так что же мистер Х может сделать, чтобы с этим бороться?

Вместо того, чтобы принимать звонки напрямую:

1. Мистер Х нанимает нового парня, мистера М, и дает ему автоответчик, чтобы звонившие могли оставлять сообщения.
2. Задача г-на М. – передать сообщение от автоответчика г-ну Х, когда он узнает, что г-н Х полностью завершил обработку всех предыдущих сообщений и уже может принять новое.
3. Так что теперь, когда вы звоните ему, вместо того, чтобы слышать сигнал «занято», вы оставляете сообщение для мистера Икс, а затем ждете, пока он перезвонит вам (пока нет времени на просмотр фильма).
4. Как только мистер X закончит со всеми сообщениями в очереди, которые он получил до вас, он рассмотрит вашу проблему и перезвонит вам, чтобы ответить.

Теперь здесь лежит вопрос: были ли действия до сих пор синхронными или асинхронными?

Это смешано. Когда вы оставили свое сообщение, мистер X не слушал его, поэтому четвертое сообщение было асинхронным.

Но, когда он ответил, вы там слушали, что делает обратное общение синхронным.

Я надеюсь, что к настоящему времени вы лучше поняли, как синхронность воспринимается с точки зрения общения. Время вводить в JavaScript.
JavaScript – язык асинхронного программирования
Когда кто-то помечает JavaScript как асинхронный, он обычно ссылается на то, как вы можете оставить для него сообщение, и чтобы ваш звонок не блокировался занятым тоном.

Вызовы функций никогда не бывают прямыми в JavaScript, они буквально выполняются с помощью сообщений.

JavaScript использует очередь сообщений, в которой хранятся входящие сообщения (или события). Цикл обработки событий (диспетчер сообщений) последовательно отправляет эти сообщения в стек вызовов, где соответствующие функции сообщений складываются как кадры (аргументы функций и переменные) для выполнения.

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

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

Рассмотрим следующий код:

function foo () {}
функциональная панель () {
  Foo ();
}
function baz () {
  бар();
}
Баз ();

Выполняемая функция – это baz () (в последней строке фрагмента кода), для которой сообщение добавляется в очередь, и когда цикл обработки событий его забирает, стек вызовов начинает укладывать кадры для baz (), bar () и foo () в соответствующих точках исполнения.
Как только выполнение функций завершается одна за другой, их кадры удаляются из стека вызовов, пока сообщение все еще ожидает в очереди, пока baz () не будет извлечен из стека.
Помните, что вызовы функций никогда не бывают прямыми в JavaScript, они выполняются с помощью сообщений. Поэтому всякий раз, когда вы слышите, как кто-то говорит, что JavaScript сам по себе является языком асинхронного программирования, предположите, что они говорят о его встроенном «автоответчике» и о том, как вы можете оставлять сообщения.
Но как насчет конкретных асинхронных методов?
До сих пор я не касался таких API, как setTimeout () и AJAX, именно они называются асинхронными. Это почему?

Важно понимать, что именно является синхронным или асинхронным. JavaScript с помощью событий и цикла обработки событий может практиковать асинхронную обработку сообщений, но это не означает все в JavaScript асинхронный.

Помните, я говорил вам, что сообщение не отправлялось до тех пор, пока в стеке вызовов не было соответствующих кадров, точно так же, как вы не ушли в кино, пока не получили ответ – это синхронно, вы ожидаете, пока задача не будет выполнена. завершите, и вы получите ответ.

Ожидание не идеально во всех сценариях. Что если после оставления сообщения вместо ожидания вы можете уйти в кино? Что если функция может выйти из системы (очистить стек вызовов), а ее сообщение может быть удалено из системы еще до завершения задачи функции? Что делать, если вы можете иметь код, выполняемый асинхронно?

Это где API, такие как setTimeout () и AJAX входят в картину, и что они делают … держись, я не могу объяснить это, не возвращаясь к мистеру X, который мы увидим во второй части этой статьи , Следите за обновлениями.