Ritardo in Javascript

[mimo84]

Ciao a tutti, sto cercando di realizzare uno script che faccia cambiare colore ad un elemento con un ritardo di x millisecondi. Ho provato prima con il metodo delay di jquery e quindi con il setTimeout proprio di JS. Qualcuno di voi mi saprebbe aiutare?
Questo è il codice con setTimeout

<div id="ciao"> ciao ciao ciao </div> 
<script> <div id="ciao">
ciao ciao ciao
</div>
<script>
    $(document).ready(function() {
        
        setTimeout($('#ciao').css("color","green"),400);
        setTimeout($('#ciao').css("color","red"),400);

    });
</script> 

Questo con il delay

<script>
    $(document).ready(function() {
        
        $('#ciao').css("color","green").delay(400).css("color","red");

    });
</script> 

La scritta si vede soltanto rossa

[mxa]

setTimeout(function(){
//tuo codice
}, 400);

Ps: tieni conto che 400 sono millisecondi, quindi può essere che la funzione con delay() in realtà funzioni solo che non fai in tempo a vedere il cambiamento.

[mimo84]

Allora ho provato nel modo in cui dici tu, (a me serve un'alternaza continua di due colori), comunque se realizzo lo script in questo modo, dovrei avere un'alternanza di bianco, verde rosso e di nuovo verde. Invece ottengo bianco e dopo un secondo verde, senza passare per il rosso.

<script type="text/javascript">

            setTimeout(function(){
                $('body').css("background-color","green");
            },1000);
            setTimeout(function(){
                $('body').css("background-color","red");
            },1000);
            setTimeout(function(){
                $('body').css("background-color","green");
            },1000);

</script> 

Ho anche provato a realizzare lo script con un ciclo for, ma non va in esecuzione e lo sfondo rimane sempre bianco:

<script>
$(document).ready(function() {

    var i=0;
    for (i=0; i!=20; i++) { 
        setTimeout(function(){
            $('body').css("background-color","green");
        },1000);
        setTimeout(function(){
            $('body').css("background-color","red");
        },1000);
    }
)};
</script> 

Sono praticamente un novizio del JS, c'è qualcuno che mi potrebbe dare una mano?
Grazie.

[mxa]

beh ma non puo fare cosi'! quando fai setTimeout e' come se lanciassi un nuovo thread e poi ritornassi, e ognuna della funzioni che passi al set timeout viene eseguita indipendentemente da tutte le altre!

prova cosi':
http://jsfiddle.net/mmarcon/283af/

(PS: ti sconsiglio vivamente di fare un sito con il colore di sfondo che cambia cosi' e con quei colori shock)

[mimo84]

Innanzitutto ti ringrazio per la risposta
Allora ti spiego a cosa mi serve cambiare lo sfondo con quei colori "Assurdi": devo fare degli esercizi a tempo per via di un infortunio. Devo stare 5 secondi in una posizione, quindi 10 secondi in un'altra e così via, percui con questo script mi posso aiutare.
Ho provato a modificare lo script che mi hai mandato, ma a quanto pare non ne sono capace

[mimo84]

Ho fatto una modifica al codice di questo genere:

$(function() {
    var colors = ['red', 'red', 'green'];
    colors.counter = 0;

    setInterval(function() {
        $('body').css("background-color", colors[colors.counter % colors.length]);
        colors.counter ++;
    }, 5000);

}); 

Anche se come soluzione mi sembra veramente poco elegante...
Ma se puoi mi spieghi come "ragiona" questa funzione? In particolare mi sfugge questo pezzetto:

colors[colors.counter % colors.length] 

Scusami ma il javascript lo conosco veramente poco

[mxa]

Originariamente inviato da mimo84
Ho fatto una modifica al codice di questo genere:
...
Anche se come soluzione mi sembra veramente poco elegante...

Non ho capito cosa hai cambiato nel mio codice (a parte il tempo), e perche' ti sembra poco elegante. Comunque, ho modificato un po' il codice: http://jsfiddle.net/mmarcon/283af/
In questo modo per ogni colore puoi mettere la durata in millisecondi:

$(function() {
    var colors = [{color:'green', time: 1000}, {color:'red', time: 2000}, {color:'white', time: 3000}];
    colors.counter = 0;
    
    var loop = function() {
        $('body').css("background-color", colors[colors.counter % colors.length].color);
        setTimeout (loop, colors[colors.counter % colors.length].time);
        colors.counter ++;
    };
    
    loop();
});

Ma se puoi mi spieghi come "ragiona" questa funzione? In particolare mi sfugge questo pezzetto:

colors[colors.counter % colors.length] 

Scusami ma il javascript lo conosco veramente poco

Mah guarda non e' un fatto di javascript, si fa cosi' in molti linguaggi di programmazione.
% e' l'operatore modulo, ovvero ritorna il resto della divisione intera tra gli operandi. Esempio:

0 % 3 = 0
1 % 3 = 1
2 % 3 = 2
3 % 3 = 0
4 % 3 = 1

e cosi' via.

Cosi' facendo scorri sempre l'array in maniera circolare utilizzando un contatore che cresce sempre.

[mimo84]

Grazie mille della spiegazione
In effetti ci potevo arrivare anche da solo a cosa servisse quel "%"
Ho detto che è poco elegante come soluzione, perchè se vedi io nell'array dei colori ho messo due volte il rosso in modo tale da farlo durare di più.
Comunque ti ringrazio infinitamente, sei stato veramente gentilissimo!