带有延迟的JavaScript循环标签

Question

我正在使用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>

我试过

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

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

Answer 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将运行第一个，等到调用$.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>