jQuery - timeout in for loop

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 myArra开发者_如何学Cy = 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]);

            })
        }
});
}

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);

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

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.

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);
}

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