JavaScript, Funktion nach Funktion ausführen

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

Dies ist, was ich bisher geschrieben habe, habe ich mehr Funktionen, die nacheinander ausgeführt werden müssen. Ich bin mir bewusst, dass ich eine einfache Callback-Funktion verwenden kann, aber ich kann es nicht funktionieren, Step2 wird nie ausgeführt. Unten ist was ich versucht habe. Gibt es auch eine bessere Methode, die ich in diesem Szenario verwenden kann, da ich mehrere Funktionen habe. Ich kann das SetTimeout nicht verwenden, da meine Hauptfunktion bei einem Klickereignis ausgelöst wird.

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

Ich nehme an, Sie möchten Step2 nach der Animation von Step1 starten, so funktioniert das?

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

Ein Beispiel Geige kann here finden.