Обновление контрольной панели в каждом цикле

У меня есть индикатор выполнения, который я обновляю в цикле многих итераций.

https://jsfiddle.net/k29qy0do/32/ (откройте консоль, прежде чем нажать кнопку "Пуск" ).

var progressbar = {};

$(function () {

    progressbar = {

        /** initial progress */
        progress: 0,

        /** maximum width of progressbar */
        progress_max: 0,

        /** The inner element of the progressbar (filled box). */
        $progress_bar: $('#progressbar'),

        /** Set the progressbar */
        set: function (num) {
            if (this.progress_max && num) {
                this.progress = num / this.progress_max * 100;
                console.log('percent: ' + this.progress + '% - ' + num + '/' + this.progress_max);

                this.$progress_bar.width(String(this.progress) + '%');
            }
        },

        fn_wrap: function (num) {
            setTimeout(function() {
                this.set(num);
            }, 0);
        }

    };

});


$('#start_button').on('click', function () {

    var iterations = 1000000000;

    progressbar.progress_max = iterations;

    var loop = function () {

        for (var i = 1; i <= iterations; i++) {

            if (iterations % i === 100) {

                progressbar.set(i); //only updates the progressbar in the last iteration

                //progressbar.fn_wrap(i); //even worse, since no output to the console is produced

            }
        }
    }

    //setTimeout(loop, 0);
    loop();

});

Консоль обновляется итеративно, как и ожидалось. Однако индикатор прогресса не обновляется.

Проблема заключается в том, что окно браузера кажется зависающим, пока цикл не завершится. Обновляется только консоль, а не панель прогресса.

Я попытался добавить setTimeout, как предлагается ниже, в нескольких местах. Но это только ухудшает ситуацию, потому что я тогда даже не получаю консоль для вывода прогресса при выполнении цикла.

ОТВЕТЫ

Ответ 2

Я предполагаю, что все ваши обновления прогресса будут выполняться в одном стеке вызовов. Хотя код JavaScript работает, DOM не может обновляться. Возможно, этот question поможет вам приступить к работе.

Ответ 3

То, что вам действительно нужно, - это асинхронный цикл, позволяющий браузеру обновлять DOM между итерациями.

JSFiddle: http://jsfiddle.net/u5b6gr1w/

function delayedLoop(collection, delay, callback, context) {
    context = context || null;

    var i = 0,
        nextInteration = function() {
            if (i === collection.length) {
                return;
            }

            callback.call(context, collection[i], i);
            i++;
            setTimeout(nextInteration, delay);
        };

    nextInteration();
}

Некоторые HTML:

<div class="progress-bar"><div style="width: 0"></div></div>

Всплеск CSS:

.progress-bar {
    border: 1px solid black;
    background-color: #f0f0f0;
}
.progress-bar div {
    background-color: red;
    height: 1.25em;
}

И некоторый JavaScript для соединения вещей вместе:

var progressBar = document.querySelector(".progress-bar div"),
    items = [1,2,3,4,5,6,7,8,9,10];

delayedLoop(items, 500, function(item, index) {
    var width = (item / items.length * 100) + "%";
    progressBar.style.width = width;
    progressBar.innerHTML = width;
});

Ответ 4

Давайте разложим это на шаги

Шаг 1: очистка HTML

Предполагая, что цель вашего вопроса заключается в том, чтобы понять, как работать с индикатором выполнения, а не стилями или ярлыками (загрузка, пожалуйста, будьте терпеливы и т.д.). Позволяет иметь индикатор выполнения и кнопку запуска.

<div id='progressbar-outer' style="">
    <div id='progressbar' style=""></div>
</div>
<button id="start_button">Start</button>

Шаг 2: Стили

Позволяет сделать индикатор выполнения видимым для пользователя

#progressbar-outer {
    height:2em;
    border:5px solid #000;
    width:15em;
}
#progressbar {
    width:0%;
    background-color:#F00;
    height:100%;
}

Шаг 3: Используя setTimeout, где он принадлежит

В вашем коде вы использовали setTimeout для установки значения вашего индикатора выполнения. Однако цикл for все еще активен.

for (var i = 1; i <= iterations; i++) {

    if (iterations % i === 100) {

        progressbar.set(i); //only updates the progressbar in the last iteration

        //progressbar.fn_wrap(i); //even worse, since no output to the console is produced

        //setTimeout(function() {
        //  progressbar.set(i);
        //}, 0);

    }
}

Использование setTimeout не влияет на остальную часть кода. Следовательно, пользовательский интерфейс был заложником, пока цикл не закончился. Попробуйте следующий код.

$('#start_button').on('click', function () {

    var iterations = 100;

    progressbar.progress_max = iterations;

    var loop = function (value) {
        progressbar.set(value);
        if (value < iterations) setTimeout(function () {
            loop(value + 1)
        }, 30);
        else $('#progressbar').css('background-color', '#0F0');
    }


    loop(1);

});

Предварительный просмотр

Попробуйте эту скрипту: https://jsfiddle.net/Ljc3b6rn/4/

Ответ 5

Вы можете использовать promises, чтобы подождать, пока ширина не будет установлена ​​до продолжения цикла.
Обновление полосы выполнения для 1000000000 итераций будет медленным, если вы поедете 1 на 1, так что вам может показаться полезным уменьшить частоту обновления.
Вместо цикла for я использовал рекурсивную функцию, которая зацикливается, когда обещание выполнено.

    set: function (num) { 
        var deferred = $.Deferred(); 
        if (this.progress_max && num) {
            this.progress = num / this.progress_max * 100;
            var self = this; 
            self.$progress_bar.animate({"width": String(this.progress) + '%'}, "fast", function() {  
                deferred.resolve(); 
            }); 
            return deferred; 
        }
    }

$('#start_button').on('click', function () {

    var iterations = 1000000000;
    var i = 0; 
    progressbar.progress_max = iterations;

    var loop = function(){
        i+=100000000; 
        if(i <= iterations){
            progressbar.set(i).then(function(){ 
                loop(); 
            }); ;         
        }
    }; 

    loop();
});

https://jsfiddle.net/k29qy0do/34/

Ответ 6

Что вам делать? Зачем тебе это? Вы должны использовать только панель прогресса, когда вам нужно подождать, пока что-то закончится. Но мы не знаем, что вы делаете на своей странице.

  • Если вы хотите отобразить ход загрузки ajax:

    $.ajax({
    ...
    xhr: function() {
        var xhr = $.ajaxSettings.xhr();
        $(xhr.upload).bind("progress", function(event) {
            var e = event.originalEvent;
            var percent = 0;
            if (e.lengthComputable)
                percent = Math.ceil(e.loaded/e.total*100);
            $("#progress").width(percent+"%");
        });
        return xhr;
    }
    ...
});

  • Для изображений вам нужен вызов ajax:

    $.ajax({
    method: "GET",
    url: "http://example.com/path/image.jpg",
    xhr: function() {/* see the code above*/ }
    ...
});

  • Для получения содержимого загруженного файла:

    var reader = new FileReader();
reader.readAsText(uploadedFile);
$(reader).bind("progress", function(e) {
    var percent = 0;
    if (e.lengthComputable)
        percent = Math.ceil(e.loaded/e.total*100);
    $("#progress").css("width", percent+"%");
});

  • Для большого объема процесса, например, для математики или добавления большого количества div, которые будут использовать 10 + secons:

    Main.js:

    var worker = new Worker("Worker.js");
$(worker).bind("message", function(data) {
    $("#progress").width((data*100)+"%");
});

    worker.js:

    var total = 43483,
    finished = 0,
    doStuff = function() {
        ++finished;
        return 1+1;
    };
setInterval(function()
{
    self.postMessage(finished/total);
}, 100);
for (var i = 0; i < total; ++i)
    setTimeout(doStuff, i*10);

  • Потому что это хорошо, и вы хотите сказать пользователю, что есть прогресс, когда нет, просто анимируйте div:

    $("#progress").animate({width: "100%"}, 3000);

Ответ 7

Вы должны использовать window.requestAnimationFrame, в противном случае браузер блокируется, пока ваш цикл не будет завершен. Обратный вызов, переданный в requestAnimationFrame, получит метку времени как параметр, который вы могли бы использовать для расчетов прогресса.

Ответ 8

Это мои 2 вопроса:

Использование веб-рабочего . Код блога webworker происходит от здесь

Код веб-рабочего:

<script type="text/ww">    
    function loop(e) {
        var data = JSON.parse(e.data);
        var i = parseInt(data.i, 10);
        var iterations = parseInt(data.iterations, 10);

        while (iterations % ++i !== 100 && i <= iterations);

        if(i <= iterations) {
            self.postMessage(JSON.stringify({ i: i, iterations: iterations }));
        }
    }

    self.onmessage = function(e) {
        loop(e);
    };
</script>

Код:

var ww = document.querySelector('script[type="text/ww"]'),
    code = ww.textContent,
    blob = new Blob([code], {type: 'text/javascript'}),
    blobUrl = URL.createObjectURL(blob),
    worker = new Worker(blobUrl);

worker.onmessage = function(e) {
    var data = JSON.parse(e.data);
    var i = parseInt(data.i, 10);
    var iterations = parseInt(data.iterations, 10);

    progressbar.set(i);

    worker.postMessage(JSON.stringify({ i: i, iterations: iterations }));
}

$('#start_button').on('click', function () {

    var iterations = 1000000000;

    progressbar.progress_max = iterations;

    worker.postMessage(JSON.stringify({ i: 0, iterations: iterations }));
});

другая идея висит поток пользовательского интерфейса, но визуально меняет ширину, поскольку я использую requestAnimationFrame для разрыва подсчета, изменения ширины панели прогресса, а затем продолжите подсчет.

function loopFrame(i, iterations) {
    requestAnimationFrame(function() {
        if (iterations % i === 100) {
            progressbar.set(i);
        }

        if(i < iterations) {
            loopFrame(i + 1, iterations);
        }
    });
}

$('#start_button').on('click', function () {
    var iterations = 1000000000;

    console.log(iterations);

    progressbar.progress_max = iterations;

    loopFrame(0, iterations);

});

Ответ 9

Возможно, это будет полезно.

var service = new Object();

//function with interrupt for show progress of operations
service.progressWhile = new Object();
service.progressWhile.dTime = 50; //step ms between callback display function
service.progressWhile.i = 0; //index
service.progressWhile.timer = 0; //start time for cycle

//@parametr arr - array for actions
//@parametr actionCallback - The function for processing array elements
//@parametr progressCallback - function to display the array index

function progressWhile(arr, actionCallback, progressCallback) {
    try {
        var d = new Date();
        service.progressWhile.timer = d.getTime();
        log(service.progressWhile.i);
        if (service.progressWhile.i >= arr.length) {
            service.progressWhile.i = 0;
            return;
        }

        while (service.progressWhile.i < arr.length) {
            actionCallback(arr[service.progressWhile.i++]);
            d = new Date();
            if (d.getTime() - service.progressWhile.timer > service.progressWhile.dTime) {
                break;
            }
        }
        if (progressCallback != undefined)
            progressCallback(service.progressWhile.i);
    } catch (er) {
        log(er);
        return;
    }

    setTimeout(function () {
        progressWhile(arr, actionCallback, progressCallback);
    }, 0);
}

Ответ 10

Здесь обновленная скрипка

Я использовал анимацию, чтобы сделать ее индикатором прогресса, как внешний вид. Надеюсь, это поможет вам.

var progressbar = {};

$(function() {

    progressbar = {
        /** initial progress */
        progress : 0,
        /** maximum width of progressbar */
        progress_max : 0,
        /** The inner element of the progressbar (filled box). */
        $progress_bar : $('#progressbar'),
        /** Method to set the progressbar.*/
        set : function(num) {
            if (this.progress_max && num) {
                this.progress = num / this.progress_max * 100;
                console.log('percent: ' + this.progress + '% - ' + num + '/' + this.progress_max);

                $('#progressbar').animate({
                    width : String(this.progress) + '%',
                }, 500, function() {
                    // Animation complete.
                });
            }
        },

        fn_wrap : function(num) {
            setTimeout(function() {
                this.set(num);
            }, 0);
        }
    };

});

$('#start_button').on('click', function() {
    $('#progressbar').css('width', '0%');
    var iterations = 1000000000;
    progressbar.progress_max = iterations;
    var loop = function() {
        for (var i = 1; i <= iterations; i++) {
            if (iterations % i === 100) {
                progressbar.set(i);
                //only updates the progressbar in the last iteration
            }
        }
    }
    loop();
});

Fiddler

  [1]: https://jsfiddle.net/k29qy0do/21/