Question

所以也许这就是少年，但我还在学习Jquery。我有几个DIV（50x50px绝对定位），这段代码使它们在屏幕上移动。我想这样做，如果你点击绿色框，它会减少间隔，从而更快地移动。显然我在这里做错了，我只是不确定是什么。

$(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});
});

Answer 1

在已经启动计时器后，您对计时器间隔的更新将无效。也许你应该保持定时器间隔不变，然后不要总是只增加1到位置，改变增量的大小。

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

Answer 2

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

Answer 3

这就像你想要的那样......

$(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();

});

Answer 4

好的......所以我想出了怎么做，但如果有人可以解释为什么这会有所帮助。

var greenLeft = $('#green').offset().left;
function moveGreen() {
    setTimeout(moveGreen, greenSpeed);
    $('#green').css('left', ++greenLeft);
}
moveGreen();
$('#green').click(function() {greenSpeed-=20});

我的猜测是setInterval只在第一次调用时检查colorSpeed，所以即使我递减速度计数器也没关系。有没有办法用setInterval来做，或者是递归的setTimeout调用唯一的方法？

我想做一些div比赛

4 个答案: