Я хочу сделать расу divs

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

Хорошо, так что я понял, как это сделать, но если кто-то может объяснить ПОЧЕМУ, что было бы полезно.

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 единственным способом?

Answer 3

Причина, по которой первый не работал, заключается в том, что setInterval передается значение, сохраненное в greenSpeed, а не указатель на эту переменную. Из-за этого последующие обновления greenSpeed ​​не повлияли. В вашем втором бите кода вы вызываете setTimeout несколько раз. Каждый раз, когда он вызывается, ему передается текущее значение, сохраненное в greenSpeed, таким образом, используя новое значение после щелчка.

Answer 4

Это работает, как вы хотите ...

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

});