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

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

我的代码对每种颜色的持续时间是相等的

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

---

有什么想法吗？

您可以使用

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

编辑：

但它可以改进一点：

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

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

编辑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();

函数FlashText（）{
var arr=[]，
cond=false，
开始=错误；
this.add=函数（el，col）{
if（typeof el=='string'）{el=document.getElementById（el）；}
arr.push（[el.style，col]）；
}
this.start=函数（）{
如果（启动）{return；}
开始=真；
main（）；
}
函数main（）{
康德=！康德；
对于（var i=0，l=arr.length；i类似的东西，你的意思是

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

演示

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

然后，内部闭包负责切换状态，更改元素的样式，然后使用适当的超时递归地再次排队。
请不要误解这一点，但一些建设性的批评如下：1.对
document.getElementBuyId（）有三个不同的调用
.2.它只会闪烁ID为
flashingtext
的元素。3.您可以使用本地状态来存储灰色/非灰色，避免阅读可能已被浏览器转换为另一种语法的样式。@Alnitak是的，我回答时没有太多修改asker的代码，但后来我意识到了这一点，并编辑了我的答案。g在我的回答中，关于重复调用
getElementById（）
的问题，我已经更新了它。FWIW，我认为我的新版本仍然是最好的，因为我只使用布尔值来存储状态，而不是颜色本身；-）我故意不优化存储指向
样式
对象本身的指针-这太过分了。@Alnitak我也不存储颜色，
cond=style.color=='grey'
也是布尔值。但是为什么存储
样式
太过分了，而存储元素却不行呢？这些解决方案都不起作用，但是如果我返回到我的or，我的解决方案就不行了原始代码它仍然可以正常工作。为什么它可以在JSFIDLE中工作而不能在我的项目中工作？存储颜色是一个好主意，因为浏览器可以将其更改为另一种语法，我没有想到+1我已经尝试过这个和其他海报的解决方案，但它们不起作用。我使用了您的代码，并使用正确的元素id和黄色作为参数。运气不好。@sheedsheedsheedsheedsheedy您是否记得将代码放入
onload
处理程序中。@Alnitak不，很抱歉我不知道，但我是javascript新手。