带延迟的javascript循环标记
我使用javascript在4个标记(p1、p2、p3、p4)和另一个标记(deck)之间循环,该标记随着每个p更新。 我缺少的一点是,我无法将延迟放在某个可以被识别的地方带延迟的javascript循环标记,javascript,delay,cycle,Javascript,Delay,Cycle,我使用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);
<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>