0

我正在尝试通过超时更改文本的颜色。就像每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/

4

3 回答 3

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/

PS 这个数组声明和你的一样，但更简洁一些。您可能想改用它：

var rainBowColors = [
    "#FF0000", //Red
    "#FF7F00", //Orange
    "#FFFF00" //Yellow
    // ... add other colors
];
于 2013-10-09T11:22:08.277 回答
1

尝试这个

setInterval(function(){
    jQuery(".text").css("color", rainBowColors[rainbowCounter]);
    rainbowCounter++;
    //Reset counter
    if (rainbowCounter == rainBowColors.length) 
    {
        rainbowCounter = 0;
    }
},500);
于 2013-10-09T11:23:59.567 回答
0 
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);
于 2013-10-09T12:13:18.310 回答