進度條不工作，因爲它應該在任何網絡瀏覽器上

Question

我在開發中遇到了一些進度條問題。

我有一個JavaScript函數，它可以同時啓動多個調用PHP進程的多個Ajax調用。這些Ajax調用代表了更大進程的百分比，因此，例如，如果我啓動100個Ajax調用，每個調用代表進程的1％。

問題是，當Ajax調用結束時，我無法強制通過JavaScript重新繪製HTTP DOM。

因此，進口這些：

<link rel="stylesheet" href="(...)/javascript/themes/base/ui.core.css"> 
<link rel="stylesheet" href="(...)/javascript/themes/base/ui.theme.css"> 
<script src="(...)/js/jquery-ui-1.7.2.custom.min.js" type="text/javascript"></script> 

而且重要的代碼是下一個：（發射Ajax調用之前）

進度的創作：

$("#progressbar").progressbar({max:100, value:0}); 
$("#progressbar").progressbar("enable"); 

每個Ajax調用完成後會修改變量。當我啓動所有Ajax調用我用JavaScript創建的setTimeout，它看起來在該變量並獲得百分比觀察員功能：

setTimeout (function(){ 
    (...) 
    var percentage = Math.round(((proccessedLines)/totalLines)*100); 
    $("#progressbar").progressbar("value", percentage); 
    (...) 
}, 500); 

最後，那個$（「＃進度」）只是一個div HTML標籤用那個名字。

所以，問題在於超時。它應該更新進度條值並更新DOM，它應該被重畫，但它不應該像它應該那樣工作。

任何想法？我不得不指出一件事：這個過程在2天前完美地工作;可能是瀏覽器中的一些新變化？

Answer 1

setTimeout函數剛剛在500ms後執行一次。也許使用setInterval函數來執行你的函數每500ms或考慮這個片斷：https://jsfiddle.net/nicolastorre/o35teyq3/32/

// Parameters 
var queryList = new Array('code', 'js', 'php'); 
var lenQueryList = queryList.length; 
var percentage = 0; 
var proceed = 0; 
var totalPercentage = 100; 

// Init progress bar 
$("#progressbar").progressbar({max:totalPercentage, value:percentage}); 
$("#progressbar").progressbar("enable"); 

for(var i = 0; i < lenQueryList; i++) { 
    /*### setTimeout to make a pause (just for the demo) ###*/ 
    setTimeout(function() { 
    console.log('just a pause to see slowly!'); 
     console.log(queryList[i]); 

     // Wikipedia api search 
    $.ajax({ 
     url: 'https://en.wikipedia.org/w/api.php?callback=?', 
     data: { 
      srsearch: queryList[i], 
      action: "query", 
      list: "search", 
      format: "json" 
     }, 
     error: function() { 
      console.log('An error occured'); 
     }, 
     dataType: 'json', 
     success: function(data) { 
      // Get results 
      console.log(data); 

      // Update progress bar 
      proceed++; 
      percentage = Math.round((proceed/lenQueryList)*totalPercentage); 
      $("#progressbar").progressbar("value", percentage); 
     }, 
     type: 'POST' 
    }); 


    }, 500 * i); // setTimeout to make a pause (just for the demo) 
    /*########################################*/ 
}