Однопоточная природа JavaScript/Typescript: асинхронное программирование

В своей первой статье я писал о некоторых различиях между JS и TS.

Теперь мы собираемся исследовать асинхронную природу как однопоточного языка.

В JavaScript и TypeScript однопоточная природа означает, что в данный момент времени может выполняться только одна задача.

С другой стороны, асинхронное программирование относится к способности языка выполнять задачи асинхронно, позволяя основному потоку выполнения продолжать работу, ожидая завершения других задач. Это достигается за счет использования обратных вызовов , событий , промисов и async / await .

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

В этом разделе я резюмирую длинный текст/главу, написанную Кайлом Симпсоном в его книге «Вы не знаете Javascript» о связи Sequential Brain с асинхронизацией. Если вас интересует только кодовая часть того, как это работает, вы можете пропустить эту часть.

« Я почти уверен, что большинство из вас слышали, как кто-то сказал (даже сами сделали это заявление): « Я многозадачен. Но
многозадачны ли мы? Можем ли мы действительно совершать два сознательных, преднамеренных действия одновременно и думать/рассуждать о них обоих в один и тот же момент? Есть ли у нашего самого высокого уровня функциональности мозга параллельная многопоточность?

Ответ может вас удивить: вероятно, нет.

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

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

По словам Симпсона, люди не способны выполнять по-настоящему многозадачные задачи так, как это может сделать компьютер. Хотя человеческий мозг действительно может обрабатывать несколько задач одновременно, он не в состоянии уделить одинаковое внимание всем задачам одновременно. Вместо этого мы быстро переключаем свое внимание между задачами, подобно тому, как программа с одним потоком может выполнять только одну задачу за раз.

К счастью, пока мы одержимы проверкой ленты социальных сетей в 15-й раз за три минуты, наш мозг продолжает выполнять все эти важные задачи в фоновом режиме (потоки!)

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

Похоже ли это на асинхронный параллелизм с событиями (точно так же, как это происходит в JS)?!

Существует большая, заметная разница между тем, как мы планируем различные задачи, и тем, как наш мозг на самом деле выполняет эти задачи.
Несмотря на то, что на операционном уровне наш мозг работает асинхронно, кажется, что мы планируем задачи последовательно и синхронно. «Мне нужно сходить в магазин, потом купить молока, а потом сдать вещи из химчистки».

Можете ли вы на самом деле представить, что у вас есть образ мыслей, который планирует ваши дела следующим образом:

« Мне нужно пойти в магазин (1), но по дороге я уверен, что мне позвонят (2) , так что «Привет, мама», и пока она начнет говорить, я поищу адрес магазина (3) по GPS, но загрузка займет секунду, поэтому я убавлю радио (4) , чтобы лучше слышать маму…
потом я пойму, что забыл надеть куртку ( 5) и на улице холодно, но неважно, продолжай ехать и разговаривай с мамой…
а потом звон ремня безопасности напоминает мне о необходимости пристегнуться (6) , так что «Да, мама, я пристегнут ремнем безопасности, я всегда пристегиваюсь!». Ах, наконец:

GPS определил направление, теперь…»

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

Имея это в виду, давайте подробнее рассмотрим, как работает асинхронное программирование в JavaScript.

Теперь к кодированию :

Существует несколько способов выполнения асинхронного программирования в JavaScript/Typescript, как я упоминал в начале этой статьи, в том числе с использованием: обратных вызовов , событий, обещаний, Async/Await.

• Обратный вызов — это функция, которая передается в качестве аргумента другой функции и выполняется после завершения внешней функции. Например:

function greet(name, callback) {
  console.log(`Hello, ${name}!`);
  callback();
}

function sayGoodbye() {
  console.log("Goodbye!");
}

greet("John", sayGoodbye);
// Output: "Hello, John!"
// Output: "Goodbye!"

• Событие — это сигнал о том, что что-то произошло, а прослушиватель — это функция, которая выполняется в ответ на это событие . Например:

const button = document.querySelector("button");

button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

• Обещание представляет собой результат асинхронной операции и может быть разрешено (успешно) или отклонено (неудачно), как и обещания в реальной жизни ; когда вы даете обещание, вы либо держите его (выполняете), либо нет (отвергаете).
  Промисы можно использовать для упрощения процесса объединения асинхронных операций. Например:

const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Completed Async Task");
  }, 1000);
});

promise.then((result) => {
  console.log(result);
});
// Output: "Async task completed" (after 1 second)

• Async/await: функция JavaScript, которая позволяет использовать синтаксис async/await, чтобы асинхронный код выглядел и вел себя как синхронизированный код. Async/await построен на основе промисов и упрощает работу с асинхронным кодом.

async function greet(name) {
  return `Hello, ${name}!`;
}

async function main() {
  const greeting = await greet("John");
  console.log(greeting);
}

main();
// Output: "Hello, John!"

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

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

Спасибо за чтение!