For loop with increasing setTimeout interval

Question

Hi I'm trying to get a for loop to run 3 times with an increasing interval each time. I'd like the loop to output text to the console each time it runs but I can't stop the loop from running all at once and showing done, finished, and done, then finished twice. Code:

function tellMeWhenDone () {

  for(var i=0; i<3; i++) {
          if (i === 0)
                  var text = console.log('done');

          else if (i === 1)
                  var text = console.log('and done');

          else (i === 2)
                  var text = console.log('finished');

          time(i);
}
}

     function time (i){
             setInterval(function(text){
        return text;
      }, 1000*(i+1))
}
tellMeWhenDone();

Any help would be greatly appreciated! Thank you.

Answer 1

setInterval sets up a recurring event. setTimeout will only fire once.

To create three timeouts, 1, 2 and 3 seconds - you may use:

setTimeout(function(){console.log('done')},1000);
setTimeout(function(){console.log('and done')},2000);
setTimeout(function(){console.log('finished')},3000);

Notice there is no loop. Each setTimeout executes and when the timeout is reached, the console.log statement is run.

Your for loop is executing completely before the setInterval call.

Answer 2

Remove the condition in else loop

function tellMeWhenDone() {

  for (var i = 0; i < 3; i++) {
    if (i === 0)
      var text = console.log('done');

    else if (i === 1)
      var text = console.log('and done');

    else
      var text = console.log('finished');

    time(i);
  }
}

function time(i) {
  setInterval(function(text) {
    return text;
  }, 1000 * (i + 1))
}
tellMeWhenDone();

Answer 3

Try with this..I hope its resolved your prblm

 function tellMeWhenDone () {

 for(var i=0; i<3; i++) {
      if (i === 0)
              var text = console.log('done');

      else if (i === 1)
              var text = console.log('and done');

      else if (i === 2)
              var text = console.log('finished');

      time(i);
}
}

 function time (i){
         setInterval(function(text){
    return text;
  }, 1000*(i+1))
}
 tellMeWhenDone();

Answer 4

You may try with callback:

function log(msg) {
  document.getElementById('logger').innerHTML += '<br/>' + msg;
}

function on_complete() {
  log('all done, when = ' + Date.now());
}

for (var i = 1, max = 5; max >= i; i++) {
  (function(x) {
    setTimeout(function() {
      log('loop, x = ' + x + ', when = ' + Date.now());
      if (max === x)
        on_complete();
    }, 1000 * x); //increasing timeout
  })(i);
}

<pre id='logger'>Running code...</pre>