jQuery getJSON回调函数在完成之前不会更新DOM

Question

我有一个jQuery ui progressbar

var item = 4;

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

这里进度条显示在页面上

然后我像这样做一个ajax电话

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

回调函数完成后，进度条会将更新更新为“ 100％”。

编辑：

我不是在尝试获取json调用的进度，而是在尝试遍历从服务器获取的东西的循环过程。 在更新进度条旁边，我还为集合中的每个项目绘制了一个div。 集合中最多有200个项目，因此进度足以显示。

在进度条不更新的旁边，新生成的div也不会显示，直到回调函数完成为止。

我添加了计时器，处理时间约为1000毫秒（这必须足以更新进度条中的几个项目）。

Answer 1

回调函数仅在呼叫成功时触发。

可以用来获得所需解决方案的2种方法是：部分调用，让服务器仅返回结果的一部分，然后将触发回调函数，从该回调函数中触发下一个ajax调用以获取在下一个代码块中，这将导致几个ajax调用而不是一个，但是您可以使进度条正常工作。

第二种方法是使用套接字执行某些操作，并将数据从服务器流式传输到PC，我怀疑您可以使用常规jquery进行此类操作，您至少需要一些插件，并且服务器端代码也需要支持它。 有关更多信息，请查看socket.io和

Answer 2

$.each是一个同步调用，等效于for(;;;)循环。 results的迭代是瞬时的，尽管进度条将在后台更新，但您注意到的太快了。

您要显示的是AJAX请求的进度，而不是迭代结果集的进度。 此外，由于$.each是同步的，因此如果$.each变得足够大以至于需要为它提供进度条，那么您将有更大的问题要担心； 例如在迭代完成之前您的应用程序无响应，而不是显示进度条。