进度条在任何Web浏览器上都不能正常工作

Question

I´m having several problems with a progress bar in one of my developments.

I have a JavaScript function which launch serveral Ajax calls which call a PHP process, all at the same time. Those Ajax calls represent a percentage of a bigger proccess, so, for example, if I launch 100 ajax calls each one represent a 1% of the process.

The problem is that I can't force re-draw the HTTP DOM via JavaScript when an Ajax call ends.

So, the imports are these:

<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>

And the important code is the next one:

Creation of progressbar (before launch Ajax calls):

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

Every Ajax call will modify a variable when they finish. When I launch all Ajax calls I create an Observer function with JavaScript setTimeout, which looks at that variable and get the percentage:

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

And, finally, that $("#progressbar") is just a div HTML tag with that name.

So, the problem is that timeout. It supposed to update that progressbar value and update the DOM, it should to be redrawn but It doesn´t work as It should.

Any ideas?

I have to point one more thing: this process was working perfectly 'till 2 days ago; could be some new changes in the browsers?

Answer 1

The setTimeout function is just executed one time after 500ms. Maybe use the setInterval function to execute your function every 500ms or consider this snippet: 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)
  /*########################################*/
}