JQuery каждый цикл: как интегрировать в JavaScript-код индикатора выполнения

Question

Я нашел этот замечательный пост о создании индикатора выполнения с помощью JavaScript: Показать ход выполнения 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 ();

Это прекрасно работает. Тем не менее, у меня есть процесс, который работает так:

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');

См. Также Что такое очереди в jQuery?

Answer 2

Метод, используемый для индикатора выполнения, несовместим с a для каждого шага.В этом методе нет способа обновить индикатор выполнения для каждой доли шага, которую выполняет для каждого.Вам лучше использовать другой метод для обновления индикатора выполнения.