2011-11-03 28 views
1

我发现这个伟大的职位上创造的javascript进度条: Show javascript execution progressjQuery的每个循环:如何整合到进度条的JavaScript代码

它为我的伟大工程,除了代码的一节我不能整合。

假设这种方法:

var process = { 
steps: [ 
       function(){ 
       //processing 
      }, 
      function(){ 
       //processing 
      }, 
      function(){ 
       element.each(function(index){ 
        //processing 
       }); 
      }, 
      function(){ 
       //processing 
      }, 
      function(){ 
       //processing 
      } 
], 
index: 0, 
nextStep: function(){ 
    this.steps[this.index++](); 
    if (this.index != this.steps.length) { 
     var me = this; 
     window.setTimeout(function(){ 
      me.nextStep(); 
     }, 0); 
    } 
} 

};

process.nextStep();

This works great。不过,我认为是这样的一个过程:

element.each(function(index){ 
    //do some processing 
}); 

的一种方式进行整合,这将是刚刚在这样的功能,把它:

function(){ 
    element.each(function(index){ 
      //do some processing 
    }); 
}, 

然而,处理的约70%在这个循环中完成。因此,如果它从10%跳跃到80%,那么它就会挫败进度条的作用。我想要做的是把这个每个循环的每个迭代作为步骤部分中的一个匿名函数来处理。因此,最终目标是除了将每个已定义的函数作为一个步骤进行计数外,我的每个循环的每次迭代都将被计为一步如何执行此操作的任何想法?我试图把.each循环放在那里,但没有成功。

感谢您的帮助。

回答

2

这是一个黑客,但你可以使用each()循环来填充你的处理步骤的队列,然后执行该队列。在这种情况下,我使用空的jQuery对象作为队列。 setTimeout需要明显改变DOM。

例如:

var myQueue = $({});  

element.each(function(index){ 
    myQueue.queue('stack', function() { 
     //do some processing 
     setTimeout(function() { myQueue.dequeue('stack'); }, 10); 
    } 
}); 

上述工程的jQuery 1.3,如果使用V1.4 +:

var myQueue = $({});  

element.each(function(index){ 
    myQueue.queue('stack', function(next) { 
     //do some processing 
     setTimeout(function() { next(); }, 10); 
    } 
}); 

一旦队列建成,并从每个循环填充,你就可以开始队列中有:

myQueue.dequeue('stack'); 

又见What are queues in jQuery?

0

用于进度栏的方法与每个步骤的a都不兼容。此方法无法为每个步骤的每个分数更新进度栏。您最好使用其他方法更新进度栏。