jQuery setTimeOut：在for循環中

Question

我在使用setTimeOut函數時遇到了一些麻煩。 盡管我看到了與此功能有關的其他主題，但仍然不了解。

我想生成5個“獸人”，但不能同時生成。 因此，我想給每個延遲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

如果希望每個獸人的延遲都不同，則必須為每個獸人傳遞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 2

您可以嘗試使用以下方法：

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 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