Is it possible to draw progresbar while iterating over each?

Question

JavaScript

in general, something like this codepen.io/DenisBardak/pen/VPvXpY
you need to change the state of the progress bar after processing each server response. How can this be implemented? with each it seems like nothing, after processing all requests it is drawn once. In general, after processing the response, start the next cycle, how can this be implemented?

Answer 1

$('#posting').click(function (){

     var items = $(".onepost");
     allpost = items.length;
     $('#accordion').hide();
     $('#loading').show();
     $('#progressbar').attr('aria-valuemax' , allpost);

     var myQueue = $({});

     $('.onepost').each(function(i,elem){
      var idpost = $(this).attr('data-idpost');
      myQueue.queue('stack', function(next) {
        $.ajax({
         type: 'POST',
         async: false,
         data: {post: idpost},
         success: function(data) {
           var procent = Math.round(i * 100 / allpost);
           $('#progressbar').attr('aria-valuenow' , i);
           $('#progressbar').css('width' , procent+'%');
         }
       });
        setTimeout(function() { next(); }, 10);
      });
    });

     myQueue.dequeue('stack');
   });

decided so