Как воспроизвести проблему синхронного кода в JavaScript

Оффтоп javascript
1

Помогите разобраться с основами JS

У меня есть вопрос по базовой концепции JavaScript. Чтобы понять преимущества Promise и Async-Await, я сначала написал обычный код, который должен выполняться строка за строкой.

Мне объяснили, что в традиционном коде, если одна строка занята каким-то процессом на несколько секунд, то остальные строки кода должны ждать. Я понимаю это так:

строка кода 1 // выполнена
строка кода 2 // выполнена  
взаимодействие с сервером // ждет ответа от сервера
строка кода 3 // ждет
строка кода 4 // ждет
строка кода 5 // ждет

Чтобы имитировать эту задержку сервера, я использовал setTimeout(2000), но все равно вижу, что остальные строки выполняются нормально. Вот мой код:

ngAfterViewInit() {
  console.log("привет");
  console.log("как");
  setTimeout(() => {
    console.log("я ждал");
  }, 2000);
  console.log("дела");
  console.log("друг");
}

Вывод:

привет
как
дела
друг
я ждал

Я ожидал, что “привет”, “как” напечатаются сначала, потом через 2 секунды “дела”, “друг” будут напечатаны. Где я делаю ошибку? Исправьте меня пожалуйста.

2

Проблема в том, что setTimeout асинхронный! JS видит setTimeout, не останавливается и не ждет - просто регистрирует колбэк и идет дальше. Хочешь блокирующий эффект? Напиши синхронный цикл for(let i = 0; i < 1000000000; i++) {} - вот тогда все зависнет. Или представь XMLHttpRequest в синхронном режиме - тогда все бы реально остановилось до ответа. setTimeout специально создан, чтобы не блокировать поток.

3

В твоем примере setTimeout не блокирует выполнение - в этом вся суть асинхронности JS. Хочешь увидеть настоящую блокировку? Попробуй Date.now() + 2000; while(Date.now() < targetTime) {} - это заморозит весь поток. Или юзай синхронные операции вроде fs.readFileSync() в Node.js. setTimeout как раз создали, чтобы НЕ блокировать остальной код.

4

Попробуй вставить тяжелые вычисления прямо в код! Например, let sum = 0; for(let i = 0; i < 5000000000; i++) { sum += i; } между console.log - это точно покажет, как все зависает. setTimeout не блокирует потоки. Что конкретно ты хочешь повторить - загрузку файлов или вычисления?