javascript 延迟循环标签

Question

我正在使用 javascript 在 4 个标签 (p1,p2,p3,p4) 和随每个 p 更新的另一个标签 (deck) 之间循环。缺少的部分是我无法在可以识别的地方放置延迟。

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

我试过

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

但是延迟方法完全被忽略了。我应该在哪里延迟它的工作？

Answer 1

延迟方法将空白回调添加到效果队列。队列依次执行每个回调。因此，要将延迟应用于函数，您必须通过 .queue() 将该函数放入效果队列中，并在运行ning .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 完成，然后才会自行出列并允许队列中的下一个函数运行.

Answer 2

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

这是工作代码：

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

javascript 延迟循环标签

javascript cycle tags with delay

javascript

delay

cycle