Iteração com impressão o iterador em tempo real

Fala galera!

Estou com dúvida em um script simples.

Eu preciso fazer uma iteração com WHILE ou FOR, mas de forma que o valor do iterador "i" seja impresso em tempo real na iteração, pois dentro deste loop, possui um delay.

Quando eu executo um comando de alerta ou impressão do iterador, ele imprimi tudo de uma vez ao carregar a página sem respeitar o tempo de pausa "delay", embora a função execute corretamente que é alterar alguns backgrounds.

Eu preciso disso para que eu consiga resetar o valor "i" do iterador, pois o loop precisará ser infinito, porém interagindo com os mesmos dados novamente.

Segue script:

	var i = 0;
	var steps = <?php echo json_encode($this->steps); ?>;

	if(steps) {
 while(i <= steps.length) {
 $('#step-' + steps[i].sort_order).delay(1000*i).animate({
 backgroundColor: '#0a5487'
 }, 'slow');

 if(i == steps.length) {

 $('singleStep').delay(1000*i).animate({
 backgroundColor: '#c5c5c5'
 }, 'slow');

 i = 0;

 } else {
 i++;
 }
 }
	}

Desde já, obrigado!