2

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

我还有一组学生 ID，我已经随机化了。

我想做的是以下几点：

  1. 随机选择一个学生
  2. 用紫色突出显示相关的 DIV（pulse类）
  3. 短暂的停顿（如 0.2 秒）
  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 循环来做到这一点？

提前致谢，

4

3 回答 3

5

您可以使用一个函数（并且显然将其重命名为更有意义的名称）：

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该类不会从前一个元素中删除。

于 2013-10-14T13:05:25.540 回答
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)

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

于 2013-10-14T13:06:27.197 回答
0

带有回调的稍微详细/通用的方法：

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);
});
于 2013-10-14T13:14:28.383 回答