Why is the following logged every 1 second? I'm multiplying 1000 milliseconds to the increment. Shouldn't my logs show up after 1 second, then 2 seconds, then 3 seconds?
for (var i = 0; i < 5; i++) {
(function(r) {
setTimeout(
function() {
console.log(r)
}
, r * 1000 );
})(i)
}
it's working correctly, basically, the loop serves as shorthand for writing this:
setTimeout( function(){ console.log(0) }, 1000)
setTimeout( function(){ console.log(1) }, 2000)
setTimeout( function(){ console.log(2) }, 3000)
setTimeout( function(){ console.log(3) }, 4000)
setTimeout( function(){ console.log(4) }, 5000)
so it would make sense that each goes off one after the other kinda looking like this:
▀
▀▀
▀▀▀
▀▀▀▀
▀▀▀▀▀
what you might be looking for is
(function newTimeout( seconds ){
if( seconds > 4 ) return;
console.log(seconds);
setTimeout( function(){
newTimeout( seconds + 1 )
}, seconds * 1000);
})(0);
which would kinda look like this
▀
▀▀
▀▀▀
▀▀▀▀
▀▀▀▀▀
hope it helps!
There is actually nothing wrong with your loop brother. What happens is that the setTimeout executions executed simultaneously. Remember your small loop execution time is just a matter of milliseconds.
Proof of concept.
for (var i = 0; i < 5; i++) {
console.log(new Date() + " Loop Executed: " + (i + 1));
(function (r) {
setTimeout(
function () {
console.log(new Date() + " " + r)
}
, (r * 1000));
})(i)
}
Why is the following logged every 1 second?
because the first one is logged after 0 x 1000ms, the second one after 1 x 1000ms, third one after 2 x 1000ms ... so, after 0, 1, 2, 3, 4 seconds
Shouldn't my logs show up after 1 second, then 2 seconds, then 3 seconds?
actually after 0, 1, 2, 3 and 4 seconds - but it's not cumulative, you're starting ALL the timeouts at virtually the same time
That's because calling setTimeout will not stop the executing of code. The loop will continue and do all the setTimeout() in each loop from the start. That's why it logs every second. They do go off after 1, 2, 3, and 4 seconds, but start all at the same time.
