자바 스크립트의 순서 변경

이 코드를 사용하고 있지만 브라우저 (New Chrome)에서 테스트 할 때 move_1_3 함수가 먼저 발생하고 move_1_2가 올바른 방법을 알려주십시오. 는자바 스크립트의 순서 변경

window.onload = main; 
var canvas = document.getElementById("canvas"); 
var context = canvas.getContext("2d"); 

function main(){ 
backGround.src = "http://www.ednetti.hu/images/cj0n9l0o6m.jpg"; 
backGround.onload = function(){ 
    context.drawImage(backGround, 0, 0, w, h); 
    ballImg.src = "http://www.clipartsfree.net/vector/large/SABROG_Glass_Blue_Ball_Vector_Clipart.png"; 
    ballImg.onload = function(){ 
     cupImg.src = "http://www.clker.com/cliparts/8/m/s/0/t/K/blue-cup-hi.png"; 
     cupImg.onload = function(){ 
      timer = setInterval(move_1_2, timeStep); 
      timer = setInterval(move_1_3, timeStep); 
      //time3 = setInterval(move_2_3, timeStep); 

     }; 
    }; 
};

}

function move_1_2() { 
if (steps >2){ 
    return; 
} 

posX =((posX2-posX1)/density)*i; 
bposX =(bposX2-bposX1)/density*i; 
context.clearRect(0, 0, w, h); 
context.drawImage(backGround, 0, 0, w, h); 
if(ballPos == 1){ 
    context.drawImage(ballImg, bposX1 + bposX, bposY, ballw, ballh); 
} 
else if(ballPos == 2){ 
    context.drawImage(ballImg, bposX2 - bposX, bposY, ballw, ballh); 
} 
else if(ballPos == 3){ 
    context.drawImage(ballImg, bposX3, bposY, ballw, ballh); 
} 
context.drawImage(cupImg, posX1 + posX, posY, cupw, cuph); 
context.drawImage(cupImg, posX3, posY, cupw, cuph); 
context.drawImage(cupImg, posX2 - posX, posY, cupw, cuph); 

i++; 
if (i == density){ 
    i = 0; 
    steps ++; 
    switch (ballPos){ 
    case 1: 
     ballPos = 2; 
     break; 

    case 2: 
     ballPos = 1; 
     break; 

    } 
    clearInterval(timer); 
}

}

function move_1_3() { 
if (steps >2){ 
    return; 
} 

posX =((posX3-posX1)/density)*i; 
bposX =(bposX3-bposX1)/density*i; 
context.clearRect(0, 0, w, h); 
context.drawImage(backGround, 0, 0, w, h); 
if(ballPos == 1){ 
    context.drawImage(ballImg, bposX1 + bposX, bposY, ballw, ballh); 
} 
else if(ballPos == 3){ 
    context.drawImage(ballImg, bposX3 - bposX, bposY, ballw, ballh); 
} 
else if(ballPos == 2){ 
    context.drawImage(ballImg, bposX2, bposY, ballw, ballh); 
} 
context.drawImage(cupImg, posX1 + posX, posY, cupw, cuph); 
context.drawImage(cupImg, posX2, posY, cupw, cuph); 
context.drawImage(cupImg, posX3 - posX, posY, cupw, cuph); 

i++; 
if (i == density){ 
    steps ++; 
    switch(ballPos){ 
     case 1: 
      ballPos = 3; 
      break; 
     case 3: 
      ballPos = 1; 
      break; 
     case 2: 
      ballPos = 2; 
      break; 
    } 
    clearInterval(timer); 
    i = 0; 
}

}

출처

2013-12-18 user3115593

하나는 솔루션은 이동하는 것입니다 (코드에서 나는 3 개 사진의 위치를 변경하려면) 함수 move_1_2의 내부에있는 timer = setInterval(move_1_3, timeStep); 행은 befor에 위치합니다. 그 기능의 끝. 그 때문에 기능 재사용 작동하지 않는 경우

, 당신은 여전히 익명의 기능을 하나의 setInterval를 사용하여 하나씩 기능을 실행할 수 있습니다

cupImg.onload = function(){ 
     timer = setInterval(function() { 
        move_1_2(); 
        move_1_3(); 
        // move_2_3(); 
       }, timeStep); 
    };

출처

2013-12-18 14:40:04 Blazemonger

고마워요.하지만 먼저 move_1_2를 1000 회 실행 한 다음 move_1_3을 1000 번 실행하는 솔루션이 필요합니다. (move_1_2를 호출 할 때마다 move_1_3을 실행하지 마십시오.) – user3115593

참조하십시오. 원래 질문. 'setInterval'을 사용하지 않고 루프를 사용하여 처음 1000 번만 실행하면 어떨까요? – Blazemonger

그것은 일종의 애니메이션입니다. 1000 회에 걸쳐 그림이 윈도우의 다른 부분에 나타납니다. 루프 만 사용하면 모니터에 최종 화면 만 보입니다. – user3115593

문제는 setInterval을 함수 호출의 정비사에

자세한 정보는 settimeout-setinterval

에게 여기에 최소한의 지연을 발견 할 수

타이머 해상도가 제한됩니다. 사실, 최소 타이머 틱 은 최신 브라우저의 경우 1ms ~ 15ms이며, 이전 브라우저의 경우 더 커질 수 있습니다 ( ).

타이머 해상도가 10이면 setTimeout (.., 1)과 setTimeout (.., 9) 사이에 차이가 없습니다.

두 가지 기능이 동시에 실행되었습니다. 누가 먼저 될지 정확히 알지 못합니다.

timer = setInterval(function(){move_1_2(); setInterval(move_1_3, timeStep);}, timeStep);

또는 연기 사용하려고 : 이 같은 것을 사용하려고합니다.

출처

2013-12-18 18:32:27 gaplyk

자바 스크립트의 순서 변경

답변

관련 문제