setTimeout ignora el tiempo de espera? (Incendios inmediatamente)

Question

Esta es mi primera inmersión real en JavaScript. Seguro que lo he usado antes, pero nunca he escrito nada desde cero.

De todos modos, estoy teniendo un problema muy extraño que espero que alguien pueda descubrir por mí.

Estoy tratando de hacer que el texto de un div se desvanezca de negro a blanco. Simple, si?

El siguiente código funciona. Cambiará el color a blanco, sin embargo, se está ignorando el tiempo setTimeout de 500 ms.

Si usa Chrome y mira la consola JS, verá fácilmente que el método doFade() se está llamando casi instantáneamente, no cada 500 milisegundos.

¿Alguien puede explicar esto?

var started = false; 
var newColor; 
var div; 
var hex = 0; 

function fadestart(){ 
    if (typeof fadestart.storedColor == 'undefined') { 
     div = document.getElementById('test'); 
     fadestart.storedColor = div.style.color; 
    } 
    if(!started){ 
     console.log('fadestart'); 
     newColor = fadestart.storedColor; 
     started = true; 
     setTimeout(doFade(), 500); 
    } 
} 

function fadestop(){ 
    console.log('fadestop'); 
    div.style.color = fadestart.storedColor; 
    started = false; 
    hex = 0; 
} 

function doFade(){ 
    if(hex<=238){ 
     console.log(hex); 
     hex+=17; 
     div.style.color="rgb("+hex+","+hex+","+hex+")"; 
     setTimeout(doFade(), 500); 
    } 
} 

Answer 1

Usted necesita deshacerse de los paréntesis en doFade().

Los paréntesis invocan la función al instante.

Sólo tiene que utilizar esto en lugar: doFade

Answer 2

setTimeout(doFade(), 500); 

Esta línea dice "ejecutar doFade(), a continuación, pasar cualquier valor vuelve a setTimeout, que ejecutará este valor de retorno después de 500 milisegundos." Es decir, está llamando al doFade() allí mismo en el acto.

Saltar los paréntesis, a pase la función de setTimeout:

setTimeout(doFade, 500); 

Answer 3

Creo que se debe utilizar setTimeout(doFade, 500); o setTimeout("doFade()", 500);