Question

我遇到setInterval（）函数问题。

我希望文本每隔几秒就改变颜色（请不要问我为什么）。我想出了一个使用jQuery setInterval（）函数来实现它的想法，但它没有像我期望的那样工作。

HTML：

<a href="skup" id="highlight">Highlighting text</a>

CSS：

a#highlight{
    color: #000000;
    text-decoration: none;
}

和JS：

 setInterval(function() {
    $('#highlight').css('color','#F79239');

    setTimeout(function(){$('#highlight').css('color','#000000');},2000);

}, 2000);

jsFiddle链接：http://jsfiddle.net/wbupY/

正如您可以看到的，该功能在几次颜色变化后停止工作。这可能是什么原因？

或许你可以建议一些其他解决方案？

Answer 1

底线是：不要混用setTimeout()和setInterval()。

相反，您应该只使用setInterval()并使用以下选项之一在每个“tick”处切换项目状态：

使用CSS类

这可以说是最灵活的，因为它可以清晰地将脚本的关注与项目的呈现分开。

CSS：

#highlight.colored {
  color: #f79239;
}

JavaScript的：

setInterval(function() {
    $('#highlight').toggleClass('colored');
}, 2000);

使用显式样式更改

这不太灵活，但它允许您在两种以上的颜色之间切换。这是功能：

function toggleColors(id, colors, interval)
{
    // keep these values local to the function
    var $element = $(document.getElementById(id)),
    state = 0;

    setInterval(function() {
        $element.css('color', colors[state]);
        // advance (toggle) the state for the next tick
        state = (state + 1) % colors.length;
    }, interval);
}

toggleColors('highlight', ['#f79239', 'black'], 2000);

Answer 2

取走settimeout并试试这个

   setInterval(function() {
             $('#highlight').css('color')  == 'rgb(0, 0, 0)' ? $('#highlight').css('color','#F79239') : $('#highlight').css('color','#000000');
    }, 2000);

Answer 3

这是因为setInterval和setTimeout

都有2000

试试这个例子

 setInterval(function() {

      $('#highlight').css('color','#F79239');
      setTimeout(function(){$('#highlight').css('color','#000000');},2000);

}, 2100);

Answer 4

两次都是一样的。将setTimeout减少到1000

jQuery：setInterval函数无理由地停止工作

4 个答案:

使用CSS类

使用显式样式更改