일부 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을 확인한다는 것입니다. 그것을 할 수있는 방법은/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(); 

});