javascript cycle tags with delay

Question

I am using javascript to cycle between 4 tags (p1,p2,p3,p4) and another tag (deck) that is updated with each p. The part that am missing is that I'm unable to place a delay somewhere that gets recognized.

<script type="text/javascript">
    var players = $('p[id^="p"]');
    i=0;
    (function cycle() {

        players.eq(i).load('game.php?p='+i, cycle);
        $('#deck').load('game.php?deck=1');
        i = ++i % players.length;

    })();
</script>

I tried with

        players.eq(i).load('game.php?p='+i, cycle).delay(1000);

but the delay method is completely ignored. Where I am supposed to place the delay to having it work?

Answer 1

I was able to make it work rethinking about it. I've added also a button to stop it and a button to reset the whole loop (both front and backend). I had to manually build the array because the elements aren't in the order I need them.

This is the working code:

<script type="text/javascript">
    var players = [];
    players.push($('#p0'));
    players.push($('#p1'));
    players.push($('#p2'));
    players.push($('#p3'));
    i=0;
    /*
     * cycle through the players.
     */
    function cyclePlayer() {

        players[i].load('game.php?p='+i);
        $('#deck').load('game.php?deck=1');
        console.log(i);
        console.log(players[i]);
        i = ++i % players.length;
    }
    PlayerLoop = setInterval('cyclePlayer()', 1500 );

    $("#stop").click(function(){
        console.log('stop game');
        clearInterval(PlayerLoop);
    });

    $('#reset').click(function() {
        $('#deck').load('game.php?reset=1');
        location.reload();
    });
</script>