setTimeout in for loop fires all at once [duplicate]

Answer 1

There is no delay in your loop, so what you actually want is to set an interval at 1000ms the first time and 2000ms the second etc.

function setDelay(i) {
    setTimeout(function(){
        console.log(i);
    }, 1000 * i);
}

for (var i = 1; i <= 10; ++i) {
    setDelay(i);
}

This can easily be achieved by multiplying the time by your index variable.

Answer 2

You can also do this:

(function updateEverySecond(){
    console.log(1);
    setTimeout(updateEverySecond, 1000);
})();

Answer 3

The problem with your code is that it will create 10 timeouts that fire more or less simultaneously after 1 second.

If you want to execute something every second (or any other frequency), you can use setInterval instead.

Answer 4

You could better use setInterval() instead of setTimeout(). With clearInterval() you can stop it from running. The code you made does not work because the for-loop doesn't have scope from itself. You can work around the for loop by using the setInterval().

Answer 5

The easiest way to achieve this is to multiply timeout by index:

function setDelay(i) {
    setTimeout(function(){
        console.log(i);
    }, i * 1000);
}

Answer 6

The use of setInterval and reference to a counter may be a better solution for you.

(function(){
  var count        = 0,
      upperBound   = 3,
      intervalTime = 1000,
      interval     = setInterval(function(){
        if (count === upperBound) {
         clearInterval(interval);
        } else {
          console.log(count);
          count++;
        }
      }, intervalTime);
}());

Hope that helps you out!