5

私は信号機を持っています - 3色：

<div class="green" id="ready"></div>
<div class="orange" id="steady"></div>
<div class="red" id="go"></div>

および配列:

var status = ["ready", "steady", "go"];

クラスを追加および削除して (点滅を模倣するために)無限ループのそれぞれに少し遅れて追加したいのですが、このコードは一度にすべてを行います。どうすれば解決できますか？

jQuery.each(status, function() {
    setTimeout(function() {
        $("#" + this).addClass('active');
    }, 3000);
});
4

3 に答える 3

15

http://jsfiddle.net/9feh7/

すべてを一度に実行するように設定しています。毎回インデックスを掛けます。

$('#ready, #steady, #go').each(function(i) { 
    var el=$(this);
    setTimeout(function() { 
        el.addClass('active');
    }, i * 3000); 
});

最初のインスタンスは 0 であるため、# readyiを 3 秒間待機させたい場合は、(i+1) * 3000

また、$('#'+this)正しい構文ではありません$(this)が、setTimeout 内では機能しません。

setInterval代わりに使用setTimeoutして、無限 (クリアされない限り) ループを実行します。

于 2013-03-13T16:06:59.783 に答える
3

これを試して：

var status = ["ready", "steady", "go"];
var i=1;
jQuery(status).each(function(index,value) {
    var self=this;
    setTimeout(function() {
       $(self).addClass('active');
    }, 3000*i);
    i++;
});

フィドル： http： //jsfiddle.net/M9NVy/

于 2013-03-13T16:10:54.973 に答える
0

私はあなたがあなたの最終目標のために連鎖する方が良いと言うでしょう。

1）赤の機能を設定します。設定されたタイムアウト1000ミリ秒で黄色の赤い機能スケジュールの終わりに。2）黄色のスケジュールの終了時に、1000msが赤でタイムアウトします

3）グリーンスケジュールの終了時に、グリーンの1000msタイムアウト。

4）red（）を呼び出してコードを開始します

これで、タイムアウトを掛けるという厄介な問題なしに、無限にループします。

それが嫌いな場合は、setTimeOutではなくsetIntervalを使用しますが、より多くの計算が必要になる場合があります。

于 2013-03-13T16:49:27.110 に答える