Question

我正在尝试使用超时更改文本的颜色。像每5秒一样，颜色应该改变。我无法让它发挥作用。我做错了什么？

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;
    }
}

完整示例：http://jsfiddle.net/xLS25/

Answer 1

回答你的问题：在你的代码中，颜色会发生变化，只是为了让人眼前一亮。循环遍历所有1000次迭代非常快，在每次迭代时执行超时（也非常快），这反过来使它们同时解决（太快以至于无法看到）。最重要的是，如果你的定时器被触发，那么由于它们的异步特性而导致并行，你正在寻找的是定时器按顺序一个接一个地启动。希望这是有道理的

尝试使用setInterval而不是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。此数组声明与您的相同，但更简洁。你可能想用它来代替：

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

Answer 2

试试这个

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);

切换文本颜色延迟

3 个答案: