Detener un bucle

[Heent]

Buenas compañeros. Me encuentro con un problema que es el siguiente:

Tengo un bucle for y quiero que pasen 500 milisegundos entre cada iteración del bucle porque modifico el fondo de un div. Es decir quiero que la ejecución se detenga un tiempo mínimo para poder ver el nuevo fondo.

He probado con setTimeOut pero primero termina el bucle y después se ejecutan las otras cosas.

He definido una función que viene a ser más o menos como la de php sleep que se llama eSleep() el código esta después del del for

Este es el código del for:

Código Javascript:

for(var i = 0; i<3; i++){
      var url = "url('fondo"+ i +".gif')";
      eSleep(1000);
      elementoDiv.css("background-image",url); //uso  JQuery para modificar el fondo
}
 

Código Javascript:

function eSleep(millisegundos) {
        var inicio = new Date().getTime();
        for (var i = 0; i < 10000000; i++) {
            if ((new Date().getTime() - inicio) > millisegundos){
                break;
            }
        }
    }
 

Sin embargo solo se me ve el último fondo, es decir el fondo2.gif

Ideas de lo que puede pasar?


Muchas gracias!