Switch Text Color with Delay

Question

I'm trying to change the color of the text with a timeout. like every 5 seconds the colors should change. I just can't get it to work. What am I doing wrong?

var rainBowColors = new Array();
rainBowColors.push("#FF0000"); //Red: #FF0000 
rainBowColors.push("#FF7F00"); //Orange: #FF7F00 
rainBowColors.push("#FFFF00"); //Yellow: #FFFF00 
rainBowColors.push("#00FF00"); //Green: #00FF00 
rainBowColors.push("#0000FF"); //Blue: #0000FF 
rainBowColors.push("#4B0082"); //Indigo: #4B0082 
rainBowColors.push("#8F00FF"); //Violet: #8F00FF  
var rainbowCounter = 0;

for (var counter = 0; counter < 1000; counter++) 
{
    //Easter :)
    //var timeOut = setTimeOut(function(){
    jQuery(".text").css("color", rainBowColors[rainbowCounter]);
    //}, 500);

    //clearTimeOut(timeOut);

    //Higher Counter
    rainbowCounter++;

    //Reset counter
    if (rainbowCounter == rainBowColors.length) 
    {
        rainbowCounter = 0;
    }
}

Full example : http://jsfiddle.net/xLS25/

Answer 1

To answer your question: in your code the colours DO change, just way to fast for an eye to see. The loop is run through all 1000 iterations VERY FAST, where your timeouts are executed on every iteration (also VERY FAST) which in turn makes them resolve seemingly all at the same time (too fast for an eye to see). Most importantly, your timers if triggered thsi way are ticking in parallel due to their asynchronous nature, where what you are looking for is for the timers to start in sequence, one after another. Hope this makes sense

Try using setInterval instead of timeout

var rainBowColors = new Array();
rainBowColors.push("#FF0000"); //Red: #FF0000 
rainBowColors.push("#FF7F00"); //Orange: #FF7F00 
rainBowColors.push("#FFFF00"); //Yellow: #FFFF00 
rainBowColors.push("#00FF00"); //Green: #00FF00 
rainBowColors.push("#0000FF"); //Blue: #0000FF 
rainBowColors.push("#4B0082"); //Indigo: #4B0082 
rainBowColors.push("#8F00FF"); //Violet: #8F00FF  
var rainbowCounter = 0;

var interval = setInterval(function(){
    jQuery(".text").css("color", rainBowColors[rainbowCounter]);

    rainbowCounter++;

    //Reset counter
    if (rainbowCounter == rainBowColors.length) 
    {
        rainbowCounter = 0;
    }
},100);

http://jsfiddle.net/xLS25/2/

P.S. This array declaration is identical to yours, yet a bit more concise. You may wanna use it instead:

var rainBowColors = [
    "#FF0000", //Red
    "#FF7F00", //Orange
    "#FFFF00" //Yellow
    // ... add other colors
];

Answer 2

Try this

setInterval(function(){
    jQuery(".text").css("color", rainBowColors[rainbowCounter]);
    rainbowCounter++;
    //Reset counter
    if (rainbowCounter == rainBowColors.length) 
    {
        rainbowCounter = 0;
    }
},500);

Answer 3

var rainBowColors = new Array(); 
rainBowColors =["#FF0000","#FF7F00","#FFFF00","#00FF00","#0000FF","#4B0082","#8F00FF"];

var rainbowCounter = 0;

function changeColor(){

    $(".text").css("color", rainBowColors[rainbowCounter]);


}
setInterval(function(){

        if (rainbowCounter != rainBowColors.length) 
        {
            rainbowCounter++;
            changeColor();
        }
        else{
            rainbowCounter = 0;
            changeColor();
        }
    }, 500);