2

我对 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/

如您所见，该功能在颜色发生几次变化后停止工作。这可能是什么原因？

或者，也许您可​​以提出其他解决方案？

4

4 回答 4

4

底线是：不要混合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);
于 2013-02-26T14:52:03.733 回答
1

带走 settimeout 试试这个

   setInterval(function() {
             $('#highlight').css('color')  == 'rgb(0, 0, 0)' ? $('#highlight').css('color','#F79239') : $('#highlight').css('color','#000000');
    }, 2000);
于 2013-02-26T14:55:32.330 回答
0

这是因为 setInterval 和 setTimeout 都有 2000

试试这个例如

 setInterval(function() {

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

}, 2100);
于 2013-02-26T14:53:09.543 回答
0

两个时间都是一样的。将 setTimeout 减少到 1000

于 2013-02-26T14:53:55.337 回答