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變得足夠大以至於需要為它提供進度條，那么您將有更大的問題要擔心； 例如在迭代完成之前您的應用程序無響應，而不是顯示進度條。