что означает асинхронное программирование в javascript?

Question

Это l oop займет около 1,5 секунд.

console.time("test")
for (let i = 0; i < 1000000000; i++) {}
console.timeEnd("test")

Мой вопрос ...

setTimeout(() => {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("banana");
}, 2000);

setTimeout(() => {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("apple");
}, 2000);

setTimeout(() => {
  for (let i = 0; i < 1000000000; i++) {}
  console.log("mango");
}, 2000);


console.log("finished")

каждый метод setTimeOut () занимает 2 секунды, а каждый лут - 1,5 секунды.
так что я должен получить

finished!
// 2 secs later
banana 
apple 
mango (all at once)

Но вывод

finished
// 2s later
 banana
  // 1.5s later
 apple
  // 1.5s later
 mango

Answer 1

Вы должны посмотреть это видео https://www.youtube.com/watch?v=8aGhZQkoFbQ, это объясняет проблему / поведение в деталях.

Просто вкратце: setTimeout поместит все циклы в очередь «Обратный вызов события». Когда теперь задержка прошла, она возьмет циклы один за другим и выполнит их. Но так как одному l oop требуется 1,5 секунды для запуска, эти 1,5 секунды блокируют выполнение всего остального, как в JS весь код (кроме веб-интерфейса) будет выполнен в главном событии l oop :

Programm start: 
loop1 => gets put into Event Callqueue (takes some milliseconds)
loop2 => gets put into Event Callqueue (takes some milliseconds)
loop3 => gets put into Event Callqueue (takes some milliseconds)
finalized is outputted. 

after 2000 milliseconds (as set in setTimout): 
loop1 => gets taken from queue and executed in the main event loop = takes 1,5 senconds and this blocks everything!
loop2 => the same... takes 1,5 seconds to execute 
loop3 => the same... takes 1,5 seconds to execute 

JS может выполнять код «параллельно» только для некоторых специальных внешних API. Большая часть кода выполняется в главном событии l oop последовательно! Эта концепция абсолютно важна для понимания.

Если вы ищете «Темы в Javascript», тогда Webworkers может быть очень хорошей альтернативой / решением. Они позволяют выполнять JS параллельно и в фоновом режиме.