我想做一些divs比赛
所以也许这是一种少年,但我仍然在学习jquery。我有几个DIV(绝对定位为50x50像素),这段代码让它们在屏幕上移动。 我想这样做,所以如果你点击绿色框,它会缩短间隔,从而加快移动速度。很明显,我在这里做错了什么,我只是不确定是什么。我想做一些divs比赛
$(document).ready(function(){
var greenSpeed = 300;
var redSpeed = 300;
var redLeft = $('#red').offset().left;
setInterval(function() {
$('#red').css('left', ++redLeft);
}, redSpeed);
var greenLeft = $('#green').offset().left;
setInterval(function() {
$('#green').css('left', ++greenLeft);
}, greenSpeed);
$('#green').click(function() {--greenSpeed});
});
你更新计时器间隔后,你已经开始计时器不会有任何效果。也许你应该保持计时器间隔不变,然后不要总是只给位置加1,而是改变增量的大小。
也就是说,“redSpeed”和“greenSpeed”将从1开始,然后您将每次迭代中的这些添加到“redLeft”或“greenLeft”。点击应该简单地将“速度”变量增加1(或2或其他)。
好吧...所以我想出了如何做到这一点,但如果有人能解释为什么会有所帮助。
var greenLeft = $('#green').offset().left;
function moveGreen() {
setTimeout(moveGreen, greenSpeed);
$('#green').css('left', ++greenLeft);
}
moveGreen();
$('#green').click(function() {greenSpeed-=20});
我的猜测是,setInterval的只检查一次colorSpeed
当它第一次调用,所以即使我递减高速计数器也没关系。有没有办法做到这一点w/setInterval,或者是一个递归setTimeout调用唯一的方法?
它并不仅仅是“检查”“colorSpeed”值 - 它们只是传递给函数的数字,所以变量的存在是未知的,并且不会被“setInterval()”检测到。 – Pointy 2011-04-20 19:16:03
第一个不起作用的原因是setInterval被传递存储在greenSpeed中的值而不是指向该变量的指针。因此,GreenSpeed的后续更新无效。在你的第二位代码中,你反复调用setTimeout。每次调用它时都会传递存储在greenSpeed中的当前值,从而在点击后使用新值。
也许这应该是对上一个答案的评论,而不是回答 – 2011-04-20 19:23:20
这就像你想要它......
$(function(){
var greenSpeed = 300;
var redSpeed = 300;
var redLeft = $('#red').offset().left;
function raceRed() {
setInterval(function() {
$('#red').css('left', ++redLeft);
}, redSpeed);
}
$('#red').click(function() {
--redSpeed;
raceRed();
});
raceRed();
var greenLeft = $('#green').offset().left;
function raceGreen() {
setInterval(function() {
$('#green').css('left', ++greenLeft);
}, greenSpeed);
}
$('#green').click(function() {
--greenSpeed;
raceGreen();
});
raceGreen();
});
+1。清除并重置每次点击的时间间隔,或者使用setTimeout。 – glomad 2011-04-20 19:15:22