Javascript在1种颜色上更长时间闪烁文本

Question

我有问题。我希望将文本从黄色闪烁（或闪烁）到灰色，但我希望黄色文本显示的时间比灰色文本长。

我为每种颜色设置相同持续时间的代码。

function flashtext(ele,col) {
var tmpColCheck = document.getElementById( ele ).style.color;

   if (tmpColCheck === 'grey') {
       document.getElementById( ele ).style.color = col;
   } else {
       document.getElementById( ele ).style.color = 'grey';
   }
 } 

setInterval(function() {
    flashtext('flashingtext','yellow');
}, 700 ); //set an interval timer up to repeat the function

有什么想法吗？

Answer 1

这样的话，你的意思是？

function flashtext(id, col) {
    var grey = true,
        el = document.getElementById(id);
    (function f() {
        grey = !grey;
        el.style.color = grey ? 'grey' : col;
        setTimeout(f, grey ? 500 : 1000);
    })();
};

演示http://jsfiddle.net/alnitak/8LYG2/

此代码使用局部变量grey来存储当前状态，而不是尝试从元素中读取它。这非常有效，并消除了浏览器可能将.style.color属性转换为另一种格式的风险。

然后内部闭包负责切换状态，更改元素的样式，然后以适当的超时递归排队。

Answer 2

您可以使用setTimeout：

function flashtext(ele,col) {
    var tmpColCheck = document.getElementById( ele ).style.color,
        time;
    if (tmpColCheck === 'grey') {
        document.getElementById( ele ).style.color = col;
        time=1400;
    } else {
        document.getElementById( ele ).style.color = 'grey';
        time=700;
    }
    setTimeout(function(){flashtext('flashingtext','yellow')},time);
}
flashtext('flashingtext','yellow');

DEMO: http://jsfiddle.net/EfpEP/

修改：

但它可以改进一点：

function flashtext(ele,col) {
    var style = document.getElementById(ele).style;
    (function main(){
        var cond=style.color === 'grey';
        style.color=cond?col:'grey';
        setTimeout(main,cond?1400:700);
    })();
}
flashtext('flashingtext','yellow');

DEMO: http://jsfiddle.net/EfpEP/3/

Alnitak有很好的存储颜色的想法，因为浏览器可以将其更改为另一种语法。但他的代码每次都在调用document.getElementById。然后，采取他的想法，我认为最好的方法是：

function flashtext(ele,col) {
    var style = document.getElementById(ele).style,
        cond=style.color === 'grey';
    (function main(){
        cond=!cond;
        style.color=cond?col:'grey';
        setTimeout(main,cond?1400:700);
    })();
}
flashtext('flashingtext','yellow');

DEMO: http://jsfiddle.net/EfpEP/4/

编辑2：

但是如果你打算使用类似

的东西

flashtext('flashingtext','yellow');
flashtext('flashingtext2','blue');
...

你最终会冻结浏览器。

相反，你应该使用

function FlashText(){
    var arr=[],
        cond=false,
        started=false;
    this.add=function(el,col){
        if(typeof el==='string'){el=document.getElementById(el);}
        arr.push([el.style,col]);
    }
    this.start=function(){
        if(started){return;}
        started=true;
        main();
    }
    function main(){
        cond=!cond;        
        for(var i=0,l=arr.length;i<l;i++){
            arr[i][0].color=cond?arr[i][1]:'grey';
        }
        setTimeout(main,cond?1400:700);
    };
}
var flash=new FlashText();
flash.add('flashingtext','yellow');
flash.add('flashingtext2','blue');
flash.start();

您也可以通过引用调用传递元素：flash.add(document.getElementById('flashingtext'),'yellow')（也许您有一个包含没有id的元素的变量）。

但是尽量不要在flash.start()之后添加更多元素。如果这样做，元素将为黑色（或默认颜色），直到调用main（可能为1.4秒）。

DEMO: http://jsfiddle.net/EfpEP/6/