如何让进度条更新每一个applet方法被称为一个循环中（不只是在循环结束）的时间？ [英] How to make progress bar update every time an applet method is called inside a loop (not only when loop is finished)?

问题描述

我有问题想调用一个小程序方法后更新与jquery进度条。我将文件复制到移动设备调用applet的方法。一切，但进度条的更新似乎很好地工作。

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.

文件的副本在所有的浏览器，但只有在Firefox进度条每个applet的方法是做一次更新。其他浏览器更新进度条，当所有工作完成后（循环结束）。

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

这是我的进度条code：

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>

这是我（在Firefox工作完美）JavaScript逻辑：

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

您可以helpe我做进度条进行更新的JavaScript再次调用该applet方法之前？

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

感谢您。

推荐答案

一个解决方案是把工作异步函数。它只会循环轮时，当前的工作已经完成。理论上，这应该工作。

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

    });

    });

基本演示

http://jsfiddle.net/3686gthy/

这篇关于如何让进度条更新每一个applet方法被称为一个循环中（不只是在循环结束）的时间？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！