javascript - 如何在每次循环内调用小程序方法时更新进度条(不仅仅是循环完成时)？

Question

我在调用小程序方法后尝试使用 jquery 更新进度条时遇到问题。我调用 applet 方法将文件复制到移动设备。除了进度条更新之外的所有内容似乎都工作正常。

文件的副本适用于所有浏览器，但仅在 Firefox 中，每次小程序方法完成时进度条都会更新。当所有工作完成(循环结束)时，其他浏览器会更新进度条。

这是我的进度条代码:

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

这是我的 JavaScript 逻辑(在 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;
  }
}

你能帮我在 javascript 再次调用 applet 方法之前更新进度条吗？

谢谢。

Answer 1

一个解决方案是将工作放入异步函数中。仅当当前工作完成时才会循环。理论上这应该可行。

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

    });

    });

基本演示

http://jsfiddle.net/3686gthy/