Синхронный и асинхронный в JavaScript

Опубликовано: 9 Декабря, 2021

Синхронный JavaScript: как следует из названия, синхронный означает быть последовательным, то есть каждый оператор кода выполняется один за другим. Итак, в основном оператор должен дождаться выполнения предыдущего оператора.
Разберемся в этом на примере.

Пример:

<script>
document.write( "Hi" ); // First
document.write( "<br>" );
document.write( "Mayukh" ) ; // Second
document.write( "<br>" );
document.write( "How are you" ); // Third
</script>

Выход:

В приведенном выше фрагменте кода Mayukh Hi , затем будет записана вторая строка Mayukh, а затем после ее завершения будет How are you .
Итак, как мы видим, коды работают последовательно. Каждая строка кода сначала ожидает выполнения своей предыдущей, а затем запускается.

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

Давайте посмотрим на примере, как работает асинхронный JavaScript.

<script>
document.write( "Hi" );
document.write( "<br>" );
setTimeout(() => {
document.write( "Let us see what happens" );
}, 2000);
document.write( "<br>" );
document.write( "End" );
document.write( "<br>" );
</script>

Выход:

Итак, код сначала регистрирует Hi а не выполняет setTimeout он регистрирует в End а затем запускает функцию setTimeout

Сначала, как обычно, Hi . Поскольку мы используем браузеры для запуска JavaScript, существуют веб-API, которые обрабатывают эти вещи для пользователей. Итак, что делает JavaScript, он передает setTimeout в такой веб-API, а затем мы продолжаем запускать наш код как обычно. Таким образом, он не блокирует выполнение остальной части кода, и после выполнения всего кода он помещается в стек вызовов, а затем, наконец, выполняется. Вот что происходит в асинхронном JavaScript.