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

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

本文关键字：更新 DOM 回调 getJSON 函数 jQuery      更新时间：2023-09-26

我有一个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毫秒(这必须足以更新进度条的几个项目)。

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

您希望显示AJAX请求的进度，而不是遍历结果集的进度。此外，由于$.each是同步的，如果它变得足够大，需要为它设置进度条，那么您将有更大的问题需要担心;例如，在迭代完成之前，应用程序没有响应，而不是显示进度条。

Callback函数只在调用成功时触发。

可以用来得到你想要的解决方案的两种方法是:部分调用,让你的服务器只返回结果的一个块，然后它会触发回调函数，从回调中触发下一个ajax调用来获取下一个块。然而，这将导致几个ajax调用而不是一个，但您可以让您的进度条工作。

第二种方法是用套接字做一些事情，并将你的数据从服务器流到你的pc，我怀疑你可以用常规的jquery做这样的事情，你至少需要一些插件，你的服务器端代码也需要支持它。要了解更多信息，请查看socket。IO和

相关文章：