将嵌套的setTimeout函数改为高效循环

Question

我有一份学生名单-每个学生都是有特定班级和ID的DIV。

我也有一系列的学生ID，我已经随机化了。

我想做的是：

1. 随机挑选一个学生
2. 用紫色高亮显示相关的DIV ( pulse类)
3. 短暂的停顿(如0.2s)
4. 选另一个随机的学生
5. 冲洗并重复1-3次共10次。
6. 用不同的颜色高亮显示选定的学生(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循环来完成这个任务？

提前谢谢你，

Answer 1

我认为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)

这可能行不通。这是我的头绪，但它应该给你和想法。

Answer 2

您可以使用一个函数(很明显，将它重命名为更有意义的东西)：

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)

编辑：请注意，这比setInterval要好，因为它总是等待一刻秒。如果内部代码花费的时间超过1/4秒，那么setInterval将跳过该迭代。这将导致页面崩溃，因为pulse类不会从前面的元素中删除。

Answer 3

一种稍微冗长的/一般的回调方法：

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