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

Пример из реальной жизни

Представим, что вы пригласили к себе троих друзей. У каждого из них есть одна просьба к вам после их прибытия. Первый запрос исходит от Друга 1 — Джоша, который хочет, чтобы вы приготовили для него пиццу, затем от Друга 2 — Бетти, которая просит кофе, и, наконец, Друг 3 — Адам спрашивает, может ли он одолжить вашу футболку. рубашка, потому что его испачкалась.

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

Синхронный подход

Допустим, мы выполняем запросы один за другим и в процессе их выполнения не переходим к другой задаче, пока полностью не закончим текущую. Итак, в нашем примере мы начинаем с запроса Джоша (Друг 1), который хочет, чтобы вы приготовили для него пиццу. Вы начинаете нарезать все ингредиенты, затем достаете тесто и т. д., и только после того, как вы вытащите приготовленную пиццу из духовки, переходите к другому запросу, который готовил кофе (Бетти). Начинаем кипятить воду, готовить чашки, сахар и т. д. Только после того, как у нас будет готова чашка кофе, мы переходим к 3-му заданию, которое просто дает футболку Адаму (Друг 3).

Как вы можете видеть на рис.1, мы успешно выполнили задачи, и все довольны, ура! Но подождите, сколько времени мы потратили впустую, просто бездействуя и ожидая, пока закипит вода или пока пицца приготовится в духовке? Вероятно, много, и поэтому Адам немного расстроен тем, что вы заставили его так долго ждать, чтобы получить свою футболку. Можем ли мы стать лучше и эффективнее? Перестаньте читать этот пост и подумайте, как можно сократить время выполнения всех трех задач. Как бы вы выполнили эти задания?

Ну, если вы думали о распараллеливании задач, то, наверное, вы умны и правильно мыслите. В следующем разделе мы объясним более эффективный способ выполнения этих задач, который сэкономит нам много времени, чтобы общаться с нашими друзьями, а не просто ждать без причины! :)

Асинхронный подход

Что, если вместо того, чтобы ждать, пока приготовится пицца в духовке, мы на самом деле включим чайник, чтобы он закипел, а также дадим Адаму его футболку, пока мы бездельничаем? Сэкономит ли этот подход время? Ответ положительный, потому что в данный период времени мы работаем не над одной задачей, а над несколькими. Таким образом мы экономим много времени. Вы можете увидеть разницу на рис. 2, если мы будем следовать асинхронному подходу.

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

Пример программирования

Аналогично ситуации, описанной выше, при выполнении команд компилятор читает инструкции одну за другой. Давайте теперь представим, что мы предоставили компилятору Инструкцию 1, Инструкцию 2 и Инструкцию 3. Для простоты пусть эти инструкции будут тривиальными:

let Instruction1 = () =>{
// Do Something...
console.log('Executed 1st instruction')
}

let Instruction2 = () =>{
// Do Something...
console.log('Executed 2nd instruction')
}

let Instruction3 = () =>{
// Do Something...
console.log('Executed 3rd instruction')
}

Примечание. Для демонстрации мы используем Node.js. Если вы хотите использовать его в своих приложениях, я бы посоветовал вам посетить документацию и ознакомиться с ней подробнее.

Если мы выполним эти инструкции синхронно, программа просто выполнит все инструкции и полностью завершит их в том порядке, в котором она была предоставлена:

Instruction1()
Instruction2()
Instruction3()
--------------
Output:
Executed 1st instruction
Executed 2nd instruction
Executed 3rd instruction

Теперь давайте добавим асинхронную функцию ко второй инструкции и изучим вывод программы:

Instruction1()
setTimeout(() => {
Instruction2()
}, 0)
Instruction3()
--------------
Output:
Executed 1st instruction
Executed 3rd instruction
Executed 2nd instruction

Примечание.функция SetTimeout() по умолчанию является асинхронной в Node.js. Если вы хотите узнать об этом подробнее, перейдите по ссылке.

Что случилось? Несмотря на то, что задержка тайм-аута составляет 0 секунд, компилятор сначала выполняет 3-ю инструкцию, а затем 2-ю. Это потому, что инструкции выполняются параллельно, и перед выполнением 2-й инструкции ожидается последняя.

Надеюсь, блог был вам полезен. Когда вы пытаетесь начать новый проект, помните о трех вещах: «Заставьте это работать, сделайте это правильно, сделайте это быстро», и не забывайте о третьем компонент! Удачи! :)