jQuery setTimeOut: 在for循环中

Question

我在使用 setTimeOut 函数时遇到了一些问题。尽管我看到了有关此功能的其他主题，但我仍然不明白。

我想生成 5 个 "orcs"，但不能同时生成。所以我想给每个延迟5秒。我创造的最好的东西是一个无限循环，但我不知道为什么它在 4 之后没有停止。

for (var z = 0; z < 4; z++) {
    (function (z) {
        setTimeout(function () {
            $("#gameBoard").append("<img class='Orc' src='Img/Orc.gif' alt='Orc'/>");
            $( ".Orc" ).animate({ "left": "+=100%" }, 20000 );
            console.log("test");
        }, 4000);
    }(z))
}

这只会产生一个兽人。为什么会这样？

不必与传递的变量一起使用。

有什么想法吗？

Answer 1

你可以试试这样：

var orcsSent = 0;

function sendOrc() {
    $("#gameBoard").append("<img class='Orc' src='Img/Orc.gif' alt='Orc'/>");
    $( ".Orc" ).animate({ "left": "+=100%" }, 20000 );
    console.log("test");

    if(orcsSent < 5) {
        orcsSent++;
        setTimeout(function () {
             sendOrc();
        }, 4000);
    }
}

sendOrc();

Answer 2

如果您希望每个兽人的延迟不同，您必须为每个兽人setTimeout传递不同的延迟：

for (var z = 0; z < 4; z++) { (function (z) { setTimeout(function () { $("#gameBoard").append("<img class='Orc' src='Img/Orc.gif' alt='Orc'/>"); $( ".Orc" ).animate({ "left": "+=100%" }, 20000 ); console.log("test"); }, 4000 * z); }(z)) }

请注意，我将延迟乘以 z。

Answer 3

使用 if 然后再次调用该函数。

例如

var step = 0
function SpawnOrcs(){
    [code for orc spawn]
    if (step <4)
    {
        step++
        setTimeout(SpawnOrcs,[time to wait in ms])
    }
}

Answer 4

对于 @lpg 的答案的更清晰的实现：

function sendOrcs(n) {
    (function loop() {
        if (--n < 0) return;
        $("#gameBoard").append("<img class='Orc' src='Img/Orc.gif' alt='Orc'/>");
        $( ".Orc" ).animate({ "left": "+=100%" }, 20000 );
        setTimeout(loop, 4000);
    })();
}

注意：这会立即生成第一个兽人，而不是在 4 秒后生成。

Answer 5

你需要的是兽人的名字！

试试这个：

function spawnOrcs(numberOfOrcs) {

    var interval = 2000;
    var orcNames = ["Graklak Glasha", "Ougigoth Batul", "Zoughat Ushug", "Graman Lash", "Grushnag Sharn", "Urgan Bumph", "Raghat Durgat", "Xujarek Uloth", "Wumkbanok Bor", "Gnarlug Umog"];

    for (var i = 0; i < numberOfOrcs; i++) {
        var name = orcNames[i % orcNames.length];
        (function(i, name) {
            setTimeout(function() {
                console.log("Spawned Orc:", name);
            }, interval * (i + 1))
        })(i, name);
    }

}

spawnOrcs(5);

我会在这里耐心等待您考虑将此标记为有史以来最佳答案！ :D

jQuery setTimeOut: 在for循环中

jQuery setTimeOut: in for-loop

javascript

performance

jquery

for-loop

settimeout