Question

我发现这篇关于使用javascript创建进度条的好文章： Show javascript execution progress

除了我无法集成的一段代码之外，它对我很有用。

假设这种方法：

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（）;

这很有效。但是，我有一个这样的过程：

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

集成它的一种方法就是把它放在这样的函数中：

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

然而，大约70％的处理是在这个循环中完成的。因此，如果它从10％跳到80％，它就会失败进度条的目的。我想要做的是将每个循环的每次迭代视为步骤部分中的匿名函数。所以最终目标是除了将每个已经定义的函数计数为一个步骤之外，我的每个循环的每次迭代都将被计为一步。关于如何执行此操作的任何想法？我试着把.each循环放在那里，但没有成功。

感谢您的帮助。

Answer 1

这有点像黑客攻击，但您可以使用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?

Answer 2

用于进度条的方法与每个步骤的a不兼容。在这种方法中，没有办法更新每个步骤的每个部分的进度条。您最好使用其他方法来更新进度条。

Jquery每个循环：如何集成到进度条javascript代码中

2 个答案: