JavaScript geschachtelte Funktionen: wie Schleifen zu vermeiden

Question

Ich erstelle eine kleine javascript/jQuery-Anwendung mit verschiedenen Schritten. Dafür verwende ich eine js-Datei mit verschiedenen Funktionen.

Oben in der Datei rufe ich meine erste Funktion auf. Innerhalb meiner ersten Funktion rufe ich eine zweite Funktion auf, wenn ich auf eine Schaltfläche klicke. Innerhalb der zweiten Funktion möchte ich die erste zurückrufen, aber "außerhalb" die zweite: Ich meine, ich möchte nicht, dass die erste Funktion in der zweiten ausgeführt wird, wegen der Looping-Effekte ...

myFirstFunction(); 

function myFirstFunction() { 

    // some code 

    $('myButton').click(function() { 
     mySecondFunction(); 
    } 

} 

function mySecondFunction() { 

    // some code 

    $('myOtherButton').click(function() { 
     myFirstFunction(); 
    } 

} 

ich weiß nicht, ob dies möglich ist, kann ich eine bessere Nutzung Objekte würde sonst, aber ich bin ziemlich neu in Javascript ... Vielen Dank im Voraus für Ihre Hilfe.

Answer 1

Sie können einzelne Ereignishandler dort verwenden:

var handler = myFirstFunction; 

$('myButton').click(function() { handler(); }); 

function myFirstFunction() { handler = mySecondFunction; } 
function mySecondFunction() { handler = myFirstFunction; } 

Das Handler entweder eine Ihrer Funktionen aufrufen wird.

Update: Oder wenn es sich um zwei verschiedene Tasten dann

$('myButton').click(mySecondFunction); 
$('myOtherButton').click(myFirstFunction); 

Answer 2

Sie haben recht, dass es gut ist, ineinander verschachtelte Funktionen zu vermeiden, aus Gründen, die Sie erwähnt haben, dass es chaotisch werden könnte. Ich bin mir sicher, jemand anderes kann Gewicht, aber wenn Sie in Vanille JS bleiben möchten, würde ich eine Variable erstellen, die Sie den Zustand ändern und eine bedingte Anweisung bestimmen, welche Funktion ausgeführt werden soll.

var state = 1; 

function handler(){ 
    if(state == 1){ 
     myFirstFunction(); 
     state = 2; 
    } 
    else if(state == 2){ 
     mySecondFunction(); 
     state = 1; 
    } 
} 

Dann haben Sie Ihre myButton führen die Handler() -Funktion.