Jquery 我想参加一些跳水比赛

也许这有点幼稚，但我还在学习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});
});

---

启动计时器后，对计时器间隔的更新将无效。也许您应该保持计时器间隔恒定，然后改变增量的大小，而不是总是向位置添加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

，所以即使我减小了速度计数器，也没关系。有没有一种方法可以使用/setInterval来执行此操作，或者递归setTimeout调用是唯一的方法？

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

这就像您希望的那样工作

$(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。与其说它只是“检查”了“colorSpeed”值，还不如说它们只是传递给函数的数字，因此变量的存在本身是未知的，并且“setInterval（）无法检测到”.也许这应该是对先前答案的评论，而不是答案