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()に、次のオプションのいずれかを使用して、各「ティック」でアイテムの状態のみを使用して切り替える必要があります。

CSS クラスの使用

これは、スクリプトの懸念事項とアイテムの表示を明確に分離するため、間違いなく最も柔軟です。

CSS:

#highlight.colored {
  color: #f79239;
}

JavaScript:

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

明示的なスタイル変更の使用

これは柔軟性に欠けますが、2 つ以上の色を切り替えることができます。これは機能です：

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

どちらの時間も同じです。setTimeoutを1000に減らします

于 2013-02-26T14:53:55.337 に答える
0

これは、setInterval と setTimeout の両方に 2000 があるためです。

たとえば、これを試してください

 setInterval(function() {

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

}, 2100);
于 2013-02-26T14:53:09.543 に答える