D
D
dantedelvengo2019-03-03 17:35:15
JavaScript
dantedelvengo, 2019-03-03 17:35:15

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>


the data is contained in an array:

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;


And here is the sending function itself, which every time if there are still values ​​in the zmet array sends them to the server

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


everything works fine, but experienced people have already guessed what the problem is. The problem is that the progress bar hangs unchanged until all the data is sent to the server, after the end of sending all the data, it fills up abruptly and disappears. That is, according to the logic, the execution of the script should be carried out in stages, but at first only the part that sends the data is executed, and at the end the part that concerns the visualization. How to do this so that after each sending of data and receiving a response, there is an update?

(I did the same through the foreach loop at the beginning - the effect was the same, then I tried it through the function as I thought here, so the progressbar will be updated)

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question