Cycling Through Three Divs in a Loop - Some Divs Not Changing

Hey all! Quick question about user display and javascript. What I want to do is turn off the update arrow gif, display the rotating arrows , do the update , hide the rotating arrows and finally display the gif that says this item is now set.

My problem is that the rotating arrows never display. I put the sleep in there because I thought the update was happening so quick that I just didnt see it but that doesnt seem to be the case.

Any help greatly appreciated.

    function sleep(milliSeconds){
    var startTime = new Date().getTime(); // get the current time
    while (new Date().getTime() < startTime + milliSeconds); // hog cpu
}

function UpdateConfig(some_id) {
    /* loop through all divs of class .changed_dropdown and if visible do something */
    $(".changed_dropdown").each(function(index) {
        if($(this).is(":visible")){ 

            some_id = ($(this).data('some_id'));
            /* turn off the div that shows this is in need of update (uparro开发者_C百科w gif) */
            $('#changed'+some_id).toggle(false);
            /* turn on the div that displays the arrows going around in a circle (roundarrow gif) */
            $('#updating'+some_id).toggle(true);

            /* pause to allow the divs to change */
            sleep(500);
            var new_config = $("#" + some_id).val();
            $.post("change_config.php?some_id="+some_id+"&config="+new_config);

            /* turn off the div that displays the arrows going around in a circle (roundarrow gif) */
            $('#updating'+some_id).toggle(false);
            /* turn on the gif that indicates this is the current setting */
            $('#unchanged'+some_id).toggle(true);

        }
    }); 
}

Your document DOM is not updated if you put a sleep function like that in your code, it simply hangs your browser. It is only updated when your script finishes its current run. You have to use setTimeout and asynchronous operations and update your document within callback functions.

Just put the last two lines into a function passed in as the handler for "$.post()":

     $.post("change_config.php?some_id="+some_id+"&config="+new_config, {}, function() {
       $('#updating'+some_id).toggle(false);
       $('#unchanged'+some_id).toggle(true);
     });

The "$.post()" launches the HTTP request, but it returns immediately. By deferring the second batch of toggles until that completes, you let other stuff happen including the update of the view.

edit — Another problem (I'm pretty sure) is that you're using that parameter "some_id" in a very questionable way. It's the argument to "UpdateConfig()", but all you ever do is reassign it from some data stashed on an element. But because it's declared outside the handler for the ".each()" loop at the top of the function, it's really shared by every iteration, and thus by all those "$.post()" handlers. I don't know why it's a parameter, but it should be safe to simply change that line where it's assigned from the ".data()" call:

        var some_id = ($(this).data('some_id'));

By declaring it with var, you make it a local variable for that ".each()" callback, and so each "$.post()" handler will have its own copy.