@dantedelvengo

Как сделать плавное обновление прогрессбара при череде XMLHttpRequest?

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

блок с прогрес баром:

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


И вот собственно сама функция отправки которая каждый раз если в массиве zmet остались ещё значения отправляет их ан сервер

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();//если массив пуст скрываем прогресбар
        }
    }


всё работает отлично, но опытные люди уже догадались в чем проблема. Проблема в том что прогресс бар висит без изменений, до того момента пока все данные не отправятся на сервер, после же окончания отправки всех данных, он резко заполняется и скрывается. То есть по логике выполнение скрипта должно выполняться поэтапно, но выполняется сначала только та часть что отправляет данные, а в конце та часть которая касается визуализации. Как это делать что бы после каждой отправки данных и получения ответа шло обновление?

(делал то же самое через цикл foreach в начале - эффект был такой же, потом попробовал через функцию как тут думал так будет обновляться прогресбар)
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
25 апр. 2024, в 11:02
5000 руб./за проект
25 апр. 2024, в 10:42
150000 руб./за проект
25 апр. 2024, в 10:41
2000 руб./за проект