Javascript пауза проблема в цикле, AJAX, JQuery

Question

Я пытаюсь создать простую анимацию. Короче говоря, у меня есть список из 20 маленьких div и один внешний div. Я хочу отобразить пять маленьких делений внутри большого деления в то время. В идеале я бы получал набор следующих 5 делений каждые 5 секунд.
Я использую функцию jquery ajax для создания небольших div, вот код:

$(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');  
            }

});

Итак, проблема в том, что я не могу заставить его ждать 5 секунд для отображения интересующей меня группы делений. Я знаю, что она делит правильно деления - когда я предупреждаю минимальное и максимальное значение, оно меняется содержимое внешнего div каждый раз, когда я закрываю предупреждение. Но я не могу найти способ приостановить функцию.

Я был бы очень признателен за помощь, это сводит меня с ума

Answer 1

Вы не хотите приостанавливать функцию; вместо этого вы хотите передать управление обратно в браузер и заставить его перезвонить вам через некоторое время. Функция window.setTimeout делает это. (Есть также связанный window.setInterval, но я обычно предпочитаю setTimeout.)

Это требует некоторой инверсии ментальной логики, но это очень похоже на вызов Ajax - вы что-то просите, затем отпускаете и заставляете браузер перезвонить, когда получите его.

Так, например:

function doSomething(x) {

    runner();

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

doSomething(10);

... отсчитывает от 10 раз в секунду. doSomething возвращается почти сразу, но затем runner перезванивается раз в секунду, пока не прекратит перепланирование.