Javascript pause problem in a loop, ajax, jquery

Question

Hi I'm trying to create a simple animation. Long story short, I've got a list of 20 small divs and one outside div. I want to display five small divs within a large div at the time. Ideally, I would get a set of next 5 divs every 5 seconds.
I'm using jquery ajax function to create small divs, here's the code:

$(document).ready(function(){
        var amount=0;
         $.ajax({
             type: "GET",
             url: "SampleServiceIncidentList.xml",
             dataType: "xml",
             success: function(xml){

                            //creates divs within GadgetMain div, works fine.

                                      });
                            amount = $("#gadgetMain").children().size(); //counts how many small divs there are
                            $("#testText").append("amount of children:"+amount); //and displays it in a test field
                            divideFeed();
             }//close success
         }); //close $.ajax(


        function divideFeed(){  //divides the set of small divs into groups 
            var limit = 5;
            var pagesNo = Math.ceil((amount/limit));
            var minimum=0; 
            var maximum;
            var i=0;
            while (i<pagesNo)
            {               
                minimum= i*limit;
                maximum=minimum+limit;                  


                //
                // PROBLEM HERE
                //
                populate(minimum, maximum);

                i++;
            }                   
        }

        function populate(minimum, maximum){
            $("#gadgetMain div").addClass('hidden'); //hides all small divs
            $("#testText").append('<br/>min: '+minimum+' max: '+maximum); //prints current group of divs (0-5; 5-10 etc)
            $("#gadgetMain div").slice(minimum,maximum).removeClass('hidden');  
            }

});

So, the problem is that I can't get it to wait 5 seconds to display a group of divs I'm interested in. I know that it divides divs correctly - when I alert the minimum and maximum value, it changes the content of the outer div everytime I close the alert. But I can't find a way of pausing the function.

I would be very grateful for some help, it's driving me mad

Answer 1

You don't want to pause the function; instead, you want to hand control back to the browser and have it call you back after an interval. The window.setTimeout function does that. (There's also the related window.setInterval, but I usually prefer setTimeout.)

It requires a bit of mental logic inversion, but it's very like making an Ajax call -- you ask for something, then let go and have the browser call you back when you get it.

So for instance:

function doSomething(x) {

    runner();

    function runner() {
        console.log("x = " + x);
        --x;
        if (x > 0) {
            window.setTimeout(runner, 1000);
        }
    }
}

doSomething(10);

...counts down from 10, once per second. doSomething returns almost immediately, but then runner gets called back once a second until it stops rescheduling itself.