Обновление контрольной панели в каждом цикле
У меня есть индикатор выполнения, который я обновляю в цикле многих итераций.
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, как предлагается ниже, в нескольких местах.
Но это только ухудшает ситуацию, потому что я тогда даже не получаю консоль для вывода прогресса при выполнении цикла.
Ответы
Ответ 1
Хорошо, я нашел решение в ответе на этот вопрос:
Javascript: как обновить индикатор выполнения в цикле 'for'
var i = 0;
(function loop() {
i++;
if (iterations % i === 100) {
progressbar.set(i); //updates the progressbar, even in loop
}
if (i < iterations) {
setTimeout(loop, 0);
}
})();
Мое решение:
https://jsfiddle.net/ccvs4rer/3/
Ответ 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/