Timed for loop in Javascript

Question

I don't even know how to get started with this: I need a for loop that executes a function (say a simple console.log()) with a timed delay between each execution. I've been trying to do it with setTimeout() and it never works. If I call the function that has the loop from setTimeout, it won't work. Ideally I'd want my for loop to print something x times, with a couple of seconds delay between each printing. Any ideas how that might work? I've tried something like this:

function printStuff(){
for(var i=0;i<5;i++){
console.log(i);
}
};
setTimeout(printStuff(),1000);

How about setInterval()?

pstenstrm
– pstenstrm

2015-06-03 13:21:04 +00:00
Commented Jun 3, 2015 at 13:21 — pstenstrm
– pstenstrm, Commented Jun 3, 2015 at 13:21
Show what you have tried. This answer has an example

Ruan Mendes
– Ruan Mendes

2015-06-03 13:21:15 +00:00
Commented Jun 3, 2015 at 13:21 — Ruan Mendes
– Ruan Mendes, Commented Jun 3, 2015 at 13:21
setInterval() or delay() if you are using jQuery

The Reason
– The Reason

2015-06-03 13:21:30 +00:00
Commented Jun 3, 2015 at 13:21 — The Reason
– The Reason, Commented Jun 3, 2015 at 13:21

suvroc · Accepted Answer · 2015-06-03 13:25:30Z

6

For me you should execute setInterval and inside this you should increase counter. When counter reach the limit you simply clear interval.

var counter = 0;
var limit = 10;
var myVar = setInterval(function(){ 
    if (counter > limit)
    {
        clearInterval(myVar);
    }
    counter++;
    console.log("test"); 
}, 1000);

edited Jun 3, 2015 at 13:25

answered Jun 3, 2015 at 13:22

suvroc

3,0621 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andreas Louv · Accepted Answer · 2015-06-03 13:21:22Z

3

init();

function init() {
  setTimeout(init, 2*1000); // wait 2 sec then call init again

  console.log(Date());
}

Or use setInterval:

// Call init after 2 sec and repeat calling it every 2. sec
setInterval(init, 2*1000);

function init() {
  console.log(Date());
}

answered Jun 3, 2015 at 13:21

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Comments

cs04iz1 · Accepted Answer · 2015-06-03 13:22:02Z

1

You could use the async module.

var count = 0;
async.whilst(
    function () { return count < 5; },
    function (callback) {
        count++;
        console.log(count);
        setTimeout(callback, 1000);
    },
    function (err) {
        // 5 seconds have passed
    }
);

This way the count will be printed every second

answered Jun 3, 2015 at 13:22

cs04iz1

1,8251 gold badge20 silver badges30 bronze badges

Comments

Emre Türkiş · Accepted Answer · 2015-06-03 13:35:28Z

1

var i = 0;
function timeout(){
    setTimeout(log, 1000);
} 
function log(){
    console.log(i++);
    timeout();
}
log();

http://jsfiddle.net/sq4v0kbf/

answered Jun 3, 2015 at 13:35

Emre Türkiş

1,00210 silver badges23 bronze badges

Comments

pid · Accepted Answer · 2015-06-03 13:21:43Z

0

Use setInterval() instead of setTimeout(). Parameters are just the same:

setInterval(function () {
  // your utility code goes here
}, 2000);

answered Jun 3, 2015 at 13:21

pid

11.6k6 gold badges37 silver badges67 bronze badges

Comments

Zee · Accepted Answer · 2015-06-03 13:31:00Z

0

Here is one more way to do it. Use a wrapper function.

var time = 2000;
for (var i = 0; i < 10; i++) {
    (function (i) {
        setTimeout(function () {
            console.log(i);
        }, time);
    })(i);
    time+=2000;

}

answered Jun 3, 2015 at 13:31

Zee

8,4805 gold badges39 silver badges59 bronze badges

Comments

dreyescat · Accepted Answer · 2015-06-03 13:31:07Z

You can create a sort of delayed loop function with the number of iterations/times you want to run. Something like this:

var delayedLoop = function (n, milliseconds) {                                       
    var iteration = function (n) {                                              
        if (n > 0) {
            n--;
            console.log(n);                                             
            setTimeout(function () {                                               
                iteration(n)                                                          
            }, milliseconds);                                                              
        }                                                                        
    };                                                                         
    iteration(n);                                                               
}
delayedLoop(4, 1000);

You could even expand the idea and even passing a function to be executed each time.

See demo.

Ruan Mendes · Accepted Answer · 2015-06-03 13:50:11Z

0

Here's what I think is simpler (and doesn't have the fallbacks of) than a setInterval

    var limit = 10,
      counter = 0,
      delay = 1000;

    function doIt() {
      document.body.innerHTML += 'Hit counter: ' + (counter++) + '<br />';
      if (counter < limit) {
        setTimeout(doIt, delay);
      }
    }
    doIt();

And you can generalize it

function runTimedLoop(delay, howMany, callback) {
  var index = 0;

  function iteration() {
    callback(index++);
    if (index < howMany) {
      setTimeout(iteration, delay);
    }
  }
  iteration();
}

runTimedLoop(1000, 10, function(index) {
  document.body.innerHTML += 'Hit counter: ' + (index++) + '<br />';
});

edited Jun 3, 2015 at 13:50

answered Jun 3, 2015 at 13:41

Ruan Mendes

92.7k31 gold badges161 silver badges225 bronze badges

Collectives™ on Stack Overflow

Timed for loop in Javascript

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related