자바 스크립트, 함수 실행 후 함수

Question

mainFunc(){ 
firstFunc(); 
SecondFunc(); 
Playball(); 
} 


function Playball() { 

var paper = new Raphael(0, 0, 800, 500); 
var backGround = paper.rect(0, 0, 800, 500); 

var ball = paper.circle(400, 0, 30); 
ball.attr({fill: "blue"}); 

function step1() { 
    ball.animate({cx: 400, cy: 600}, 2500); 
} 

step1(); 
}; 

이것은 내가 지금까지 작성한 내용으로, 연속적으로 실행해야하는 많은 기능이 있습니다. 나는 간단한 콜백 함수를 사용할 수 있다는 것을 알고 있지만, 작동하지 못한다. Step2는 절대 실행하지 않는다. 아래는 제가 시도한 것입니다. 또한 여러 가지 기능을 가지고 있기 때문에이 시나리오에서 사용할 수있는 더 나은 방법이 있습니다. 주 기능은 클릭 이벤트에서 발생하므로 SetTimeout을 사용할 수 없습니다.

function Playball (callback) { 

var paper = new Raphael(0, 0, 800, 500); 
var backGround = paper.rect(0, 0, 800, 500); 

var ball = paper.circle(400, 0, 30); 
ball.attr({fill: "blue"}); 

function step1() { 
    ball.animate({cx: 400, cy: 600}, 2500); 
} 

step1(); 
return true; 
}; 

Playball(step2()); 

Answer 1

step1의 애니메이션 후에 step2를 시작한다고 가정하십니까?

function Playball (callback) { 

    var paper = new Raphael(0, 0, 800, 500); 
    var backGround = paper.rect(0, 0, 800, 500); 

    var ball = paper.circle(400, 0, 30); 
    ball.attr({fill: "blue"}); 
    //http://dmitrybaranovskiy.github.io/raphael/reference.html#Element.animate 
    function step1() { 
    ball.animate(
     {cx: 400, cy: 600}//params 
     , 2500   //number of milliseconds for animation to run 
     ,undefined  //easing type 
     ,callback   //callback function. Will be called at the end of animation 
    ); 
    } 

    step1(); 
    return true; 
}; 

Playball(step2); 

예시 바이올렛은 here입니다.