Answer the question
In order to leave comments, you need to log in
How to make a smooth update of the progressbar with a series of XMLHttpRequest?
I need to send several requests to the server in order to exchange data via XMLHttpRequest, usually about 20, the data can be large, so I divide them into several requests, and I have a progress bar that I want to update as I send data and receive a response from the server I do this:
a block with a progress bar:
<div class="omi_progerscont"><span id="omi_impzago"></span><div id="omi_porgresbar"></div></div>
var sr = 0;
var zmet; //массив с данными
var alll = zmet.length;
var proc = Math.ceil(298/alll);// 298 это значение margin полоски прогресбара тут вычисляем на сколько пикселей её двигать при каждой отправке
increq (zmet,proc,sr,alll); //запускаем функцию отправки
var sr = 0;
function increq (zamet,proc,sr,alll) {
if (zamet.length != 0) {
var sendser = new XMLHttpRequest();
sendser.open('GET', 'http://***.***/hyst/acore.php?t=i&did='+zamet[0], false);
sendser.onload = function() {
var data = JSON.parse(sendser.responseText);
//тут кое какие операции с ответом с сервера
sr++
var curm = 298-(proc*sr); //используя переменные вычисляем сдвиг полоски прогрес бара
$('#omi_impzago').html('Экспорт ('+sr+' из '+alll+')');
$('#omi_porgresbar').html('<div class="omi_progerssbar"><div style="margin-left: -'+curm+'px;"></div></div>');
zamet.shift();//удаляем отправленный элемент данных из массива
increq (zamet,proc,sr,alll);//запускаем функцию снова
}
sendser.send();
} else {
$('.omi_progrbacgound').fadeOut();//если массив пуст скрываем прогресбар
}
}
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question