每次在循环内调用小程序方法时(不仅在循环完成时)如何使进度条更新? [英] How to make progress bar update every time an applet method is called inside a loop (not only when loop is finished)?

问题描述

我在调用小程序方法后尝试使用 jquery 更新进度条时遇到问题.我将文件复制到调用小程序方法的移动设备.除了进度条更新外，一切似乎都正常.

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

这是我的进度条码:

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

这是我的 javascript 逻辑(在 Firefox 上完美运行):

var totalSize=0;var currTotalSize=0;//文件信息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

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

谢谢.

解决方案

One Solution 它把工作放在一个异步函数中.它只会在当前工作完成后循环.理论上这应该可行.

Jquery

 $(document).ready(function() {///异步函数.var asyncFor = 函数(参数){变量默认值 = {总计:0,限制:1，暂停:10，上下文:这个},选项 = $.extend(defaults, params),def = $.Deferred(),步 = 0,完成 = 0;this.loop = function() {如果(完成< options.total){步 = 0;for (; step < options.limit; step += 1, done += 1) {def.notifyWith(options.context, [完成]);}setTimeout.apply(this, [this.loop, options.pause]);} 别的 {def.resolveWith(options.context);}};setTimeout.apply(this, [this.loop, options.pause]);返回定义；};///你在这里做你的工作var totalSize=0;var currTotalSize=0;//文件信息totalSize=getXMLData(xml,'XML.FILES-SIZE');var files = getXMLData(xml,'XML.FILES.FILE.FILE-PATH');var filesSizes = getXMLData(xml,'XML.FILES.FILE.FILE-SIZE');异步({总计:files.length，上下文:这个}).进度(功能(步骤){var appletReturn = $("#applet")[0].copyFiles(files[step]);currTotalSize+=parseInt(filesSizes[step]);var百分比=calcPercentage(currTotalSize, totalSize);$('#progress-bar-count').text(percentage+'%');$('#progress-bar-count').css('width',百分比+'%');}).完成(功能(){警报(完成")});});

基本演示

http://jsfiddle.net/3686gthy/

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.

解决方案

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/

这篇关于每次在循环内调用小程序方法时(不仅在循环完成时)如何使进度条更新?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！