[SOLUCIONADO] Problema con setTimeout

[s3rgio]

Hola a tod@s,

Quisiera comentar un problema que tengo con JavaScript..

Quisiera programar un sencillo carrusel de imágenes (los efectos visuales de momento los dejo apartados).

El funcionamiento es bastante básico (creo), simplemente cargo en la pantalla todas las imágenes y luego con una función javascript voy modificando cual de ellas se muestra y cual se oculta.

El código HTML es el siguiente:

Código HTML:

<div id="carrusel">
	<img src="imagen1.jpg"></img>
	<img src="imagen2.jpg"></img>	
</div> 

El código JavaScript es este otro:

Código PHP:

  function changeImagen(vIndex)
{
    // Recupero todas las imagenes
    
    var doc =  document.getElementById("carrusel");
    var images = doc.getElementsByTagName("img");
    
    // Recorro el array
    for(var i = 0; i < images.length; i++)
    {
                // Oculto todas las imágenes
        images[i].style.display = "none";    
          
                // muestro la imagen que corresponda con la variable vIndex
        if(i == vIndex)
        {
            images[i].style.display = "block";    
        }
    }
    
    // Contador
    
    if(vIndex == images.length - 1)
    {
        vIndex = 0;
    }
    else
    {
        vIndex = vIndex + 1;
    }
    
    
    // Llamo a la funcion con el contador incrementado

    window.setTimeout(changeImagen(vIndex),5000);
} 
   

Mi problema está en la última línea del código JavaScript:

Código PHP:

  window.setTimeout(changeImagen(vIndex),5000); 
   

Si ejecuto este código paso a paso, hace exactamente lo que yo quiero (lo hago con el depurador de Chrome) pero si lo ejecuto libremente, la consola de JavaScript me devuelve el error "Maximum call stack size exceeded", es decir, que he llamado demasiadas veces de manera recursiva a la función.

¿Cómo puedo solventar esto?

Por otro lado, a pesar de que estoy indicando 5000 segundos de retardo en la llamada a la función, el navegador ignora ese parámetro y la llamada la hace inmediatamente....

¿Sabéis por qué puede estar provocado?

Soy algo nuevo en JavaScript y seguro que hay mil cosas que me estoy saltando...

¡Muchas gracias!

[Aijoona]

Tu problema es que no estás programando la funcion a ejecutarse en un futuro, sino que estas ejecutandola en el momento.

La firma de la funcion es setTimeout(FUNCTION, LAPSE), donde recibe FUNCTION vos le estás pasando el resultado de changeImagen y no la función en sí.

La solución? Usar una función anónima:

Código Javascript:

window.setTimeout(function() {
    changeImagen(vIndex);
},5000);
 

[s3rgio]

¡Ahora funciona perfectamente!

Muchas gracias por la respuesta Aijoona.

Lo que no acabo de entender es cuando comentas

...donde recibe FUNCTION vos le estás pasando el resultado de changeImagen y no la función en sí

¿Qué diferencia hay entra la llamada que hacía yo (donde efectivamente, se pasaba el resultado) a la llamada desde una función anónima?

Según he leido en Internet, la llamada a una función desde setTimeout debe hacerse como comentas, pero no acabo de ver el motivo..

De todas formas, muchas gracias por tu atención!

[Aijoona]

No recibe la llamada de la funcion anonima, sino LA funcion anonima.

Si vos ejecutas la funcion, va a recibir el resultado (el RETURN) de dicha funcion, en lugar de LA funcion en si.