如何在每次在循環內調用applet方法時進行進度條更新（不僅在循環完成時）？

Question

我在調用applet方法後試圖用jquery更新進度條時出現問題。我將文件複製到調用小程序方法的移動設備。除了進度條更新以外的所有內容似乎都能正常工作

這些文件的副本在所有瀏覽器中都能正常工作，但只有在firefox中，每次applet方法完成後，進度條纔會更新。其他瀏覽器在所有工作完成後都會更新進度條（循環結束）。

這是我的進度條代碼：

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

你能helpe我做的JavaScript調用之前的進度條進行更新小程序的方法呢？

謝謝。

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/