How to make progress bar update every time an applet method is called inside a loop (not only when loop is finished)?

问题

I'm having problem trying to update a progress bar with jquery after calling an applet method. I copy files to a mobile device calling the applet method. Everything but the progress bar update seems to work fine.

The copy of the files work in all browsers but only in firefox the progress bar is updated each time the applet method is done. The other browsers update the progress bar when all work is done (loop is over).

This is my progress bar code:

<div class="progress progress-striped active" id="progress_bar">
  <div class="bar" id="progress-bar-count" style="width: 0%;">0%</div>
</div>

This is my javascript logic (working perfect on firefox):

var totalSize=0;
var currTotalSize=0;
//files infos
totalSize=getXMLData(xml,'XML.FILES-SIZE');
var files = getXMLData(xml,'XML.FILES.FILE.FILE-PATH');
var filesSizes = getXMLData(xml,'XML.FILES.FILE.FILE-SIZE');
for(var index=0; index<files.length && status==true; index++){
  var appletReturn = $("#applet")[0].copyFiles(files[index]);
  if(appletReturn=="true"){
    currTotalSize+=parseInt(filesSizes[index]);
    var percentage=calcPercentage(currTotalSize, totalSize); //simple rule of 3
    $('#progress-bar-count').text(percentage+'%');
    $('#progress-bar-count').css('width', percentage+'%');
  }
  else{
    status=false;
  }
}

Can you helpe me make the progress bar be updated before javascript calls the applet method again?

Thank you.

回答1:

One Solution it to put the work in an asynchronous function. It will only loop round when the current work has completed. In theory this should work.

Jquery

    $(document).ready(function() {

     /// the Assync function.

    var asyncFor = function(params) {

        var defaults = {
          total: 0,
          limit: 1,
          pause: 10,
          context: this
        },
          options = $.extend(defaults, params),
          def = $.Deferred(),
          step = 0,
          done = 0;

        this.loop = function() {
          if (done < options.total) {
            step = 0;
            for (; step < options.limit; step += 1, done += 1) {
              def.notifyWith(options.context, [done]);
            }
            setTimeout.apply(this, [this.loop, options.pause]);
          } else {
            def.resolveWith(options.context);
          }
        };

        setTimeout.apply(this, [this.loop, options.pause]);
        return def;
      };



    /// You do your work here

var totalSize=0;
var currTotalSize=0;
//files infos
totalSize=getXMLData(xml,'XML.FILES-SIZE');
var files = getXMLData(xml,'XML.FILES.FILE.FILE-PATH');
var filesSizes = getXMLData(xml,'XML.FILES.FILE.FILE-SIZE');

    asyncFor({
      total: files.length, 
      context: this
    }).progress(function(step) {

    var appletReturn = $("#applet")[0].copyFiles(files[step]);

    currTotalSize+=parseInt(filesSizes[step]);

    var percentage=calcPercentage(currTotalSize, totalSize); 

    $('#progress-bar-count').text(percentage+'%');

    $('#progress-bar-count').css('width', percentage+'%');  

     }).done(function() {

    alert("finished")

    });

    });

Basic Demo

http://jsfiddle.net/3686gthy/

来源：https://stackoverflow.com/questions/25943207/how-to-make-progress-bar-update-every-time-an-applet-method-is-called-inside-a-l

标签

javascript

jquery

asynchronous

applet

progress-bar