[Synov_son]

Здравствуйте,

Помогите, пожалуйста, в поиске ошибки.

Есть задача: отправить определенное кол-во запросов на сервер один за другим, не асинхронно, и отображать при этом текущий прогресс.

<div data-url="someurl" data-times-repeat="5" class="pbar">
    <p>Processing...</p>
    <div class="processBar">
        <p class="pbState">0%</p>
        <div class="pbStateBox"></div>
    </div>
</div>

$(document).ready(function(){
	$('.pbar').each(function(i, el){
        setTimeout(function(){ pbar(el) }, 1500*(i+1));
    });
});
function pbar(sel){
	if(sel){
		var $el = $(sel);
		var url = $el.data('url');
		var timesRepeat = 3;//$el.data('times-repeat');
		var timeout = 10*1000;
		if(url && timesRepeat){
			var incPerQuery = Math.floor(100/timesRepeat);
			
			var $bar = $el.find('.pbStateBox');
			var $state = $el.find('.pbState');
			
			for(var i=1; i<=timesRepeat; i++){
				var params = {
				   url: 	url+'&ajax',
				   timeout: timeout,
				   async:	false,
				   success: function(data){
					   var process = (i==timesRepeat ? 100 : i*incPerQuery)+'%';
					   
					   $bar.width(process);
					   $state.html(process);
				   }
				};
				setTimeout(function(){$.ajax(params)}, 300);
			}
		}
	}
}

Но вместо того чтобы отобразить пошагово увеличение процента в блоке с прогрессом ничего не происходит вплоть до последнего запроса (ждет, а потом сразу 100%). Т.е. 0% и потом 100%, но если наблюдать за процессом через dev tools изменения в html происходят, пример:

<p class="pbState">33%</p>
<div class="pbStateBox"></div>

Но только в .pbState, а ширина .pbStateBox даже не сетится. А должно быть:

<p class="pbState">33%</p>
<div class="pbStateBox" style="width: 33%;"></div>

Буду благодарен за любой совет.