带延迟的javascript循环标记

我使用javascript在4个标记（p1、p2、p3、p4）和另一个标记（deck）之间循环，该标记随着每个p更新。 我缺少的一点是，我无法将延迟放在某个可以被识别的地方

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

---

但是延迟方法被完全忽略了。我应该把延迟放在什么地方让它工作？

延迟方法向效果队列添加一个空白回调。队列依次执行每个回调。因此，要将延迟应用于函数，必须通过

.queue（）

将该函数排入效果队列，并通过运行

.dequeue（）

告知队列该函数何时完成

根据您的问题，我不能100%确定您希望延迟的位置，但如果加载p，等待完成，加载甲板，等待完成，延迟1秒，然后移动到下一个项目，情况会是这样的：

    var players = $('p[id^="p"]');
    i=0;
    /*
     * cycle through the players.
     */
    (function cycle() {
        // first load ?p. Dequeue once finished loading
        $.queue(function() {
            players.eq(i).load('game.php?p='+i, $.dequeue);
        })
        // Next load deck=1. Dequeue once finished loading
        $.queue(function() {
            $('#deck').load('game.php?deck=1', function() {
                // increment/loop once loading is complete
                i = ++i % players.length;
                $.dequeue();
            })
        })
        $.delay(1000)
        $.queue(function() {
            cycle();
        })
    }());

还没有测试过代码，但应该给你正确的想法。我们正在排队等待几个函数，最后一个函数之前有一个延迟。jQuery将运行第一个，并等待调用$.dequeue后再运行下一个，以此类推

---

$.delay（）

基本上只是

$.queue（function（）{setTimeout（$.dequeue，time）}

的别名。例如：它会等到setTimeout完成后，才释放自身并允许队列中的下一个函数运行。

我重新思考后，才能够让它工作。我还添加了一个停止它的按钮和一个重置整个循环（前端和后端）的按钮。 我不得不手动构建数组，因为元素的顺序不符合我需要的顺序

这是工作代码：

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

var=[]；
球员。推（美元（“#p0”）；
玩家。推（$（'p1'））；
玩家。推（$（'p2'））；
玩家。推（$（'p3'））；
i=0；
/*
*循环浏览玩家。
*/
函数cyclePlayer（）{
玩家[i].load（'game.php？p='+i）；
$（'#deck'）.load（'game.php？deck=1'）；
控制台日志（i）；
console.log（players[i]）；
i=++i%players.length；
}
PlayerLoop=setInterval（'cyclePlayer（）'，1500）；
$（“#停止”）。单击（函数（）{
console.log（“停止游戏”）；
clearInterval（PlayerLoop）；
});
$（“#重置”）。单击（函数（）{
$（'#deck'）.load（'game.php？reset=1'）；
location.reload（）；
});

在获取当前元素的数据后，是否希望调用cycle（）的速度不超过1秒？或者这1在新循环之前，您只需要执行以下代码行？好的，我掌握了队列概念的逻辑，但是如果我使用这段代码，我会得到一个错误，其中“TypeError:$.queue（…）.queue不是函数”，我不知道如何修复它，因为它是jQuery类上的“静态”方法，可能不支持链接。我已经调整了代码以反映这一点。您还可以使用播放器作为jquery对象进行排队/出列，这将支持链接。例如，类似于

players.eq（i）.queue（…）

这肯定是一种比您的原始代码要好得多的方法，我几乎要讨论过它，但想回答为什么延迟被忽略的问题。很好的重构！

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