jQuery setTimeOut：在for循环中

Question

I'm having a little trouble with the setTimeOut-function. Although I saw other topics concerning this feature, I still don't get it.

I want to spawn 5 "orcs", but not at the same time. So I wanted to give each a delay of fe 5 seconds. The best thing I created was an infinite loop, but I don't know why it didn't stop after 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))
}

This will only spawn one Orc. Why's this happening?

It doesn't have to be with a passed variable.

Any ideas?

Answer 1

If you want the delay to be different for each orc, you must pass the setTimeout a different delay per orc:

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

Notice that I am multiplying the delay by z .

Answer 2

You can try with something like this:

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

Use if and then call the function again.

for example

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

Answer 4

For a cleaner implementation of @lpg's answer:

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

NB: this will spawn the first Orc immediately, not after 4 seconds.

Answer 5

What you need are Orc names!

Try this:

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

I'll wait patiently over here while you think about marking this as the best answer ever! :D