javascript - jQuery:setInterval 函数无故停止工作

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