在ajax調用循環中使用jQuery更新頁面元素

我想創建一個將XML數據導入到WordPress網站的jquery函數。在這個過程中，我希望它能夠單獨導入帖子，然後在每次導入完成時更新進度欄和/或計數器。在ajax調用循環中使用jQuery更新頁面元素

我的問題是，最新進展都顯得直到整個過程結束後舉行回來，然後在同一時間更新所有。

例如：而不是1/100完成後，再2/100完成後，等待結束，然後將在同一時間全部100個更新更新頁面。

希望我的代碼將解釋它比我更好：S

// Send inital data to check XML feed 
$.ajax({ 
    url: ajaxurl, 
    type: 'POST', 
    data: ajaxdata 
}).done(function(response) { 

    ... 

    // Process XML data 
    $('#progress').html('<h3>Import Progress</h3><p id="import_status"></p>'); 

    data2 = $("#form_name").serialize(); 

    finished = false; 
    count = 0; 

    while (!finished) { 

     var ajax = $.ajax({ 
      url: ajaxurl, 
      data: data2, 
      type: 'POST', 
      async: false 
     }).done(
      function(response2) { 
       if (response2 == 0) { 
        finished = true; 
       } else { 
        count++; 
        split = response2.toString().split("::"); 
        $('#progress').append('<p><strong>Item'+count+'/'+split[0]+'</strong><br/><strong>Status:</strong> '+split[1]+'</p>'); 
        if (count >= split[0]) { 
         finished = true; 
        } 
       } 
      } 
     ); 

    } // while 

    $('#progress').append('<p>Import Complete!</p>'); 

    ... 

}

在ajaxurl PHP文件正在返回它應該在正確的地方。用於上下文中，而循環期間，PHP文件返回一個字符串是這樣的：

100::Some Status Information

其中100是將要返回的行的總數。

的循環運行的正確的次數和輸出所有正確的信息，這是完成時...但它通過項目不輸出項目...它輸出所有在同一時間。

我錯過了什麼？我怎樣才能得到這個輸出每個項目狀態報告單獨？

感謝您提供任何幫助。

編輯：只是一些額外的信息，該<h3>ImportProgress</h3>沒有出現，直到後while循環要麼完成！整批人馬上出現！

來源

2013-02-05 Elliott Bristow

從我理解JavaScript在單個線程上運行，所以while迭代塊的執行和你的頁面的渲染。

爲了在Javascript中出現進展過程正在運行，你應該重構你的代碼，如下回答顯示了一種方法來做到這一點：Show javascript execution progress。

希望它有幫助。

來源

2013-02-05 19:15:10

有趣。所以如果我正在閱讀這個權利，而不是使用'while'，我創建了一個包含ajax請求的進程，然後在完成之前調用它自己，直到完成爲止？ –

是的，這是基本的想法。 –

在ajax調用循環中使用jQuery更新頁面元素

回答

相關問題