Question

我有一个jQuery ui进度条

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

Callback功能仅在通话成功时触发。

可用于获得所需解决方案的两种方法是：部分电话，让你的服务器只返回结果的一大块，然后它将触发回调函数，从该回调中激活下一个ajax调用以获取下一个块，然而，这会导致一些ajax调用，而不是一个，但你可以让你的进度条工作。

第二种方法是使用套接字做一些事情并将数据从服务器传输到你的电脑，我怀疑你可以用常规的jquery做类似的东西，你需要至少一些插件，以及你的服务器端代码还需要支持它。有关更多信息，请查看socket.io和

Answer 2

$.each是同步调用，相当于for(;;;)循环。 results上的迭代是即时的，当进度条将在后台更新时，它太快你无法注意到。

您希望显示AJAX请求的进度，而不是迭代结果集的进度。此外，因为$.each是同步的，如果它变得足够大以保证它的进度条，你会担心更大的问题;例如，在迭代完成之前，您的应用程序没有响应，而不是显示进度条。

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

2 个答案: