我想做一些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}); 
});

来源

2011-04-20 aslum

你更新计时器间隔后，你已经开始计时器不会有任何效果。也许你应该保持计时器间隔不变，然后不要总是只给位置加1，而是改变增量的大小。

也就是说，“redSpeed”和“greenSpeed”将从1开始，然后您将每次迭代中的这些添加到“redLeft”或“greenLeft”。点击应该简单地将“速度”变量增加1（或2或其他）。

来源

2011-04-20 19:13:37 Pointy

+1。清除并重置每次点击的时间间隔，或者使用setTimeout。 – glomad 2011-04-20 19:15:22

好吧...所以我想出了如何做到这一点，但如果有人能解释为什么会有所帮助。

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调用唯一的方法？

来源

2011-04-20 19:14:55 aslum

它并不仅仅是“检查”“colorSpeed”值 - 它们只是传递给函数的数字，所以变量的存在是未知的，并且不会被“setInterval（）”检测到。 – Pointy 2011-04-20 19:16:03

第一个不起作用的原因是setInterval被传递存储在greenSpeed中的值而不是指向该变量的指针。因此，GreenSpeed的后续更新无效。在你的第二位代码中，你反复调用setTimeout。每次调用它时都会传递存储在greenSpeed中的当前值，从而在点击后使用新值。

来源

2011-04-20 19:21:47

也许这应该是对上一个答案的评论，而不是回答 – 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(); 

});

来源

2011-04-20 19:22:57 65Fbef05

我想做一些divs比赛

回答

相关问题