자바 스크립트에서 움직이지 않음

Question

사용자가 X 및 Y 오프셋 값을 입력하면 그림이 창의 왼쪽 위 모서리에서 시작한 다음 왼쪽에서 오른쪽으로 이동하고 마지막으로 이동하도록 그림을 애니메이션 싶습니다. 사진은 한 번에 한 픽셀 씩 끝까지 내려갑니다. 내 자바 스크립트

여기 내 코드의

, http://jsfiddle.net/nMdNk/3/

, 나는이 :

function moveRight() { 
    hx = document.getElementById("xval").value; 
    imgx = document.getElementById("picture").clientX; //get current X from image 
    for (a = 0; a <= imgx; a++;) { 

     if (imgx == hx) { 
      moveDown(); 
     } else { 
      setTimeOut(moveRight, 1000); 
     } 
    } 
} 

function moveDown() { 
    hy = document.getElementById("yval").value; 
    imgy = document.getElementById("picture").clientY; //get current Y from image 
    for (b = 0; b <= imgy; b++;) { 

     if (imgy = hy) { 
      return; //stop when reach to final destination 
     } else { 
      setTimeOut(moveDown, 1000); 
     } 
    } 
} 

내가 x와 사진의 y 좌표하지만 확신하지 않는 잘못된 요소를 검색하는 것 같아요. 어떤 도움을 주시면 감사하겠습니다. 감사합니다!

Answer 1

코드를 수정하여 JSFiddle에 넣었습니다. 나는 몇 가지 변화를 만들었지 만 너무 과격하지는 않았다. 주된 for 루프는 불필요한 것이고 이상한 행동을 일으켰습니다. setTimeout에서 함수를 호출하면 for 루프가 본질적으로 우회됩니다. 따라서 for 루프의 각 반복마다 setTimeout을 통해 완전히 새로운 작업 체인을 시작하게됩니다. 예를 들어 검사 (imgx ​​== hx)가 없다면 스크립트는 for 루프를 사용하더라도 무기한으로 계속 진행됩니다.

function init(){ 
    document.getElementById("picture").style.left = '0px'; 
    document.getElementById("picture").style.top = '0px'; 
    moveRight(); 
} 
function moveRight() { 
    hx = 1 * document.getElementById("xval").value; 
    imgx = document.getElementById("picture").offsetLeft; //get current X from image 
    document.getElementById("picture").style.left = (imgx + 1) + 'px'; 
    if (imgx == hx) { 
     moveDown(); 
    } else { 
     setTimeout(moveRight, 10); 
    } 
} 

function moveDown() { 
    hy = 1 * document.getElementById("yval").value; 
    imgy = document.getElementById("picture").offsetTop; //get current Y from image 
    document.getElementById("picture").style.top = (imgy + 1) + 'px'; 
    if (imgy == hy) { 
     return; //stop when reach to final destination 
    } else { 
     setTimeout(moveDown, 10); 
    } 
}