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

Question

我有一个学生列表 - 每个学生都是一个具有特定类(class)和 ID 的 DIV。

我还有一组学生 ID，我已将其随机化。

我想做的是:

1. 随机挑选一名学生
2. 用紫色突出显示相关的 DIV(pulse 类)
3. 短暂的停顿(比如 0.2 秒)
4. 随机挑选另一个学生
5. 冲洗并重复 1-3 次，共 10 次
6. 用不同颜色突出显示所选学生(所选 类(class))

下面的代码可以正常工作...

                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

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

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