带有延迟的javascript循环标签

时间:2018-07-24 17:29:04

标签: javascript delay cycle

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

test-sets-,4
foo-,3

我尝试过

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

,但延迟方法被完全忽略。我应该在哪里推迟工作呢?

2 个答案:

答案 0 :(得分:1)

delay方法将一个空白的回调添加到效果队列。队列依次执行每个回调。因此,要将延迟应用于功能,您必须通过.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将先运行jQuery,然后等到$ .dequeue被调用,再运行下一个,等等。

$.delay()基本上只是$.queue(function() {setTimeout($.dequeue, time)})的别名。例如:它会等到setTimeout完成后再出队,并允许队列中的下一个函数运行。

答案 1 :(得分:0)

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

这是工作代码:

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