jQuery getJSON callback function doesn't update the DOM until it finishes

Question

I have a jQuery ui progressbar

var item = 4;

$('<div/>', { id: 'progressBar' + item, 'class': 'ui-widget-default flpb' }).appendTo($('#test'));
$('#progressBar' + item).progressbar({ value: 0 });

here the progressbar shows up on the page

then I do a ajax call like this

$.getJSON("http://" + jsonServiceUrl + "/data/for/" + item + "/from/" + $('#dtStart').val() + "/to/" + $('#dtEnd').val() + "?callback=?", 
   function (results) {
       var pbScale = 100 / results.count,
           startTime = new Date().getTime();

       $.each(result, function (r, result) {
           //here the progress bar doesn't update.
           $('<div/>', { html: " Date: " + new Date(parseInt(result.TimeOfMeasurement.substr(6))) }).appendTo('#test');
           $('#progressBar' + item).progressbar('value', r * pbScale);
       });
       console.debug('elapsed milisecs: ' + new Date().getTime() - startTime;
   });

The progressbar gets updates to "100%" after the callback function finishes.

EDIT:

I'm not trying to get the progress of my json call, I'm trying to get the progress of looping through the collection of things I get back from the server. Next to updating the progress bar I also draw a div for every item in the collection. There are upto 200 items in the collection so there is progress enough to be shown.

Next to the progress bar not updating, the newly generated divs also don't show up until the callback function finishes.

I added the timer and the processing time is about 1000 miliseconds (which must be enough to update the progressbar a couple items).

Answer 1

The Callback function only fires when the call is successful.

the 2 methods that can be used to get the solution you want would be: partial calls, have your server return only a chunk of the result, it will then fire the callback function, from within that callback fire a next ajax call to fetch the next chunk, this would however result in a few ajax calls instead of one, but you can have your progressbar working.

second method would be to do something with sockets and stream your data from the server to your pc, I doubt you can do something like that with regular jquery, you will need at least some plugin for that, and your server side code will also need to support it. for more info take a look at socket.io and

Answer 2

$.each is a synchronous call, which is equivalent to a for(;;;) loop. The iteration over your results is instantaneous, and whilst the progressbar will be updating in the background, it's too quick for you to notice.

You want to be showing the progress of your AJAX request, not your progress of iterating over the result set. Furthermore, because the $.each is synchronous, if it ever becomes large enough to warrant a progressbar for it, you'll have bigger problems to worry about; such as the unresponsiveness of your application until the iteration completes, than showing a progress bar.