jQuery - timeout in for loop

Question

I have written a bit of jQuery to loop through items in a array an display a random number and then move on to display another number. The problem is I want to put a delay inside the loop so that it shows the number for 2 seconds and then moves of to the next. so you see a random number it holds for 2 seconds and then moves on to the next. I have tried putting a timeout inside the loop but that didn't work. Any help would be amazing thanks.

function RandomNumberGenerator(){

    var myArray = new Array(99);

        for (var i=0; i< 99; i++) {
            myArray[i] = Math.floor(Math.random()*100)
            myArrayTwo[i] = Math.floor(Math.random()*100)
        }

        for (var i=0; i< 9; i++) {
            $('li.num').text(function(index) {

            // timeout needs to be here somewhere 

            return (myArray[i]);

            })
        }
});
}

Try putting the timeout at the very end of the loop, instead of inside the function setting the text. — Edoardo Pirovano
– Edoardo Pirovano, Commented Sep 17, 2011 at 20:26

gion_13 · Accepted Answer · 2011-09-17 20:41:23Z

3

note that this isn't the cleanest/better solution, but since nobody posted what you asked for, here's an implementation of the delay in your for loop :

var delay = 2000; //2 seconds
for (var i=0; i< 9; i++) {
    setTimeout(function(index){
       $('li.num').text(myArray[index]);
    },delay * i,i);

answered Sep 17, 2011 at 20:41

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

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

Comments

Jon · Accepted Answer · 2011-09-17 20:37:07Z

First of all you need to put the code that does the work (displays the random number and decides if it should continue) inside its own function. This function can also be a local variable inside RandomNumberGenerator:

    var displayNumber = function() {
        $('li.num').text(myArray[i++]);
        if (i < 100) {
            setTimeout(displayNumber, 2000);
        }
    };

The function above puts a number in li.num, increments i, and tells the browser to call the function again (using setTimeout) in two seconds -- but only if we have shown less than 100 numbers.

So when this function (displayNumber) is called for the first time, it displays one number and sets things up to call itself again after 2 seconds (to display another number, and so on). If it has displayed 100 numbers already it does not set the call up again, so at that point the repetition stops.

So you can now do:

    var myArray = new Array(99);
    for (var i=0; i< 99; i++) {
        myArray[i] = Math.floor(Math.random()*100);
    }

    var i = 0;
    var displayNumber = function() {
        $('#foo').text(myArray[i++]);
        if (i < 10) {
            setTimeout(displayNumber, 2000);
        }
    };

    displayNumber(); // to get the ball rolling

Dave Newton · Accepted Answer · 2011-09-17 20:29:42Z

2

You don't really want the timeout "in the loop", you want to update the number at the end of the timeout, then start another timeout that'll update the number, and repeat, until your end condition is met.

answered Sep 17, 2011 at 20:29

Dave Newton

161k27 gold badges263 silver badges310 bronze badges

Comments

Guffa · Accepted Answer · 2011-09-17 20:33:53Z

Delaying the code in the function doesn't work. The browser won't show any updates as long as your code is running, so you have to exit out of the function before the change shows up.

So, you have to divide the work into pieces that you can call using setTimeout or setInterval.

Something like this:

function RandomNumberGenerator(){

  var myArray = new Array(99);

  for (var i = 0; i < 99; i++) {
    myArray[i] = Math.floor(Math.random()*100)
    myArrayTwo[i] = Math.floor(Math.random()*100)
  }

  var index = 0;
  var handle = window.setInterval(function() {
    $('li.num').text(myArray[index]);
    if (++index == 100) {
      window.clearInterval(handle);
    }
  }, 2000);
}

user229044 · Accepted Answer · 2012-07-31 16:32:56Z

0

This is the fairly concise type of construct I would use for this (using setTimeout instead of setInterval).

var $li = $('li.num');  // Set a local variable for efficiency

var tloop = function(iter, num_of_iters, delay, $li){
    setTimeout(function(){
        $li.text(Math.floor(Math.random()*100)); 
        if (iter < (num_of_iters - 1))  tloop(iter+1, num_of_iters, delay, $li);
    }, delay);
};

tloop(0, 10, 2000, $li);  // Kick off the display

edited Jul 31, 2012 at 16:32

user229044♦

241k41 gold badges346 silver badges350 bronze badges

answered Sep 18, 2011 at 12:58

Neil

3,2111 gold badge19 silver badges15 bronze badges

Collectives™ on Stack Overflow

jQuery - timeout in for loop

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Linked

Related