javascript - ネストされた setTimeout 関数を効率的なループに変更する

Question

私は学生のリストを持っています - 各学生は特定のクラスとIDを持つDIVです。

また、ランダム化した学生 ID の配列もあります。

私がやりたいことは次のとおりです。

ランダムに生徒を選ぶ
関連する DIV を紫色で強調表示します (pulseクラス)
短い一時停止 (0.2 秒など)
別のランダムな学生を選ぶ
すすぎ1～3を合計10回繰り返す
選択した生徒を別の色でハイライトします (selectedクラス)

以下のコードは正しく動作します...

                setTimeout(function() {
                    $("#" + arr[1]).addClass('pulse');
                    setTimeout(function() {
                        $("#" + arr[1]).removeClass('pulse');

                        setTimeout(function() {
                            $("#" + arr[2]).addClass('pulse');
                            setTimeout(function() {
                                $("#" + arr[2]).removeClass('pulse');

                                    setTimeout(function() {
                                        $("#" + arr[3]).addClass('pulse');
                                        setTimeout(function() {
                                            $("#" + arr[3]).removeClass('pulse');

                                            setTimeout(function() {
                                                $("#" + arr[4]).addClass('pulse');
                                                setTimeout(function() {
                                                    $("#" + arr[4]).removeClass('pulse');

                                                    setTimeout(function() {
                                                        $("#" + arr[5]).addClass('pulse');
                                                        setTimeout(function() {
                                                            $("#" + arr[5]).removeClass('pulse');

                                                            setTimeout(function() {
                                                                $("#" + arr[6]).addClass('pulse');
                                                                setTimeout(function() {
                                                                    $("#" + arr[6]).removeClass('pulse');

                                                                    setTimeout(function() {
                                                                        $("#" + arr[7]).addClass('pulse');
                                                                        setTimeout(function() {
                                                                            $("#" + arr[7]).removeClass('pulse');

                                                                            setTimeout(function() {
                                                                                $("#" + arr[8]).addClass('pulse');
                                                                                setTimeout(function() {
                                                                                    $("#" + arr[8]).removeClass('pulse');

                                                                                    setTimeout(function() {
                                                                                        $("#" + arr[9]).addClass('pulse');
                                                                                        setTimeout(function() {
                                                                                            $("#" + arr[9]).removeClass('pulse');

                                                                                            setTimeout(function() {
                                                                                                $("#" + arr[10]).addClass('pulse');
                                                                                                setTimeout(function() {
                                                                                                    $("#" + arr[10]).removeClass('pulse');
                                                                                                    $("#" + arr[0]).addClass('activeClass');
                                                                                                    Dojo.disableButtons(false);
                                                                                                }, 250);
                                                                                            }, 250);

                                                                                        }, 250);
                                                                                    }, 250);

                                                                                }, 250);
                                                                            }, 250);

                                                                        }, 250);
                                                                    }, 250);

                                                                }, 250);
                                                            }, 250);

                                                        }, 250);
                                                    }, 250);

                                                }, 250);
                                            }, 250);

                                        }, 250);
                                    }, 250);

                            }, 250);
                        }, 250);

                    }, 250);
                }, 250);

しかし、信じられないほど醜いです。

for ループを使用してこれを行うより効率的な方法はありますか?

前もって感謝します、

score 5 · Accepted Answer

関数を使用することもできます (明らかに、より意味のある名前に変更します)。

function lessMessy(index) {
    $("#" + arr[index]).addClass('pulse');
    if (index === 10) {
        $("#" + arr[0]).addClass('activeClass');
        Dojo.disableButtons(false);
    } else {
        setTimeout(function() {
            $("#" + arr[index]).removeClass('pulse');
            lessMessy(index + 1)
        }, 250)
    }
}

lessMessy(1)

編集:これは、常に1/4 秒待機するsetIntervalためよりも優れていることに注意してください。内部のコードが 1/4 秒より長くかかる場合は、その繰り返しをスキップします。クラスが前の要素から削除されないため、これは壊れたページにつながります。setIntervalpulse

score 1 · Accepted Answer

setInterval関数が必要だと思います。
これは、を呼び出すまで他の関数を実行しますclearInterval。
[編集]
ここにアイデアがあります:

var arr = YOUR ARRAY HERE;
var index = 0;
var t = setInterval(function(){
    if (index > 0){
       $('#' + arr[index - 1]).removeClass('pulse'); //remove class from previous
    }
    if (index < 10){
       $('#' + arr[index]).addClass('pulse'); //add class to current element
    }
    else { 
      clearInterval(t);//stop everything
    }
    index ++;
}, 250)

これはうまくいかないかもしれません。それは私の頭の上にありますが、それはあなたとアイデアを与えるはずです.

score 0 · Accepted Answer

コールバックを使用したもう少し冗長な/一般的なアプローチ:

var pulseStudent = function( student, callback ){
  student = $('#' + student);
  student.addClass('pulse');
  setTimeout(function(){student.removeClass('pulse');}, 250);
  setTimeout(callback, 500);
};

var pulseStudents = function( students, callback ){
  var student = students.pop();
  if ( student ) {
    pulseStudent( student, function(){
      pulseStudents( students, callback );
    });
  }
  else {
    callback();
  }
};

pulseStudents( arr.slice(0), function(){
  $("#" + arr[0]).addClass('activeClass');
  Dojo.disableButtons(false);
});

javascript - ネストされた setTimeout 関数を効率的なループに変更する

3 に答える 3

Related

Reference