Почему SetTimeout не выполняет должным образом внутри цикла VS внутри рекурсивной функции

Question

Этот код ждет одну секунду и выполняет все итерации сразу:

for(let i=0;i<4;i++){ 
    setTimeout(function(){console.log("Hello")},1000) 
} 

Этот код выполняет правильно, как и ожидалось:

var i = 0; 
function loop(){ 
setTimeout(function(){ 
    console.log("Hello" + " " + Number(i+1)) 
    i++ 
    if(i<3){ 
     loop() 
    } 
},1000) 

loop() 

Мой вопрос: почему? Это связано с синхронным однопоточным характером JavaScript? как так? Объяснение, почему это происходит, - мой вопрос.

Answer 1

Ваш первый код делает это:

«Установить четыре тайм-аута, чтобы уйти в одну секунду с этого момента»

Ваш второй код:

«Установить тайм-аут и предупредит значение i , приращение i, и если цикл не закончился, установите новый тайм-аут «

Вполне разница! Главное, установить несколько тайм-аутов не похоже на очередь, они все начнут с того момента, когда вы их вызовете.

Answer 2

Вы, вероятно, хотите, чтобы умножить задержку i

var f = function(){console.log("Hello")}; 
 
for (let i=0; i<4; ++i) setTimeout(f, i * 1000);