Führe eine Funktion aus, nachdem eine andere Funktion komplett bearbeitet wurde

Question

Ich hoffe du kannst mir helfen ... Ich möchte genau das tun, was nth Child vor vier Jahren im folgenden Beitrag jquery, how to run a function as soon as another function ends gefragt hat. Ich weiß, dass dieses Problem früher gelöst wurde. Ich habe die Lösungen hier gefunden, und nach langen Sitzungen, in denen ich herausgefunden habe, wie ich mich nähern kann, und jetzt einen riesigen Stapel Frustration, kann ich nicht anders, als dieses Thema wieder zu öffnen. Also hier ist, was ich gerne tun würde:

Grundsätzlich möchte ich das Verhalten des Inhalts ein- und/oder ausschalten, der beim Anklicken von Elementen (Referenzboxen) ein- und ausgeschaltet werden soll. Ich habe zwei Funktionen:

1.Function ‚removeRefContent‘

zur Überprüfung gemeint, ob der Inhalt von anderen Referenzen, als die angeklickt wird geöffnet, und wenn ja, in der Nähe

function: 'appendRefContent2EndOfLine' 

nur Fügt den Inhalt der angeklickten Referenzbox hinzu und zeigt sie an.

Hier sind die wesentlichen Code-Schnipsel:

Funktion displayRefContent (clickedRefID) {

// check, if element is opened already  
if ($('div#' + clickedRefID + '_refAdditionalContent').length)) { 
     removeRefContent();   
} else { 

    // check whether other element is opened and close    
    removeRefContent().then(appendRefContent2EndOfLine (clickedRefID)); 

} 

}

// diese beiden Funktionen sind hinter

Funktion appendRefContent2EndOfLine (requestedRefID) {

// get refContent from reference storage container 

var refContent = '<div id="' + requestedRefID + '_refAdditionalContent" class="refAdditionalContent">'; 
    refContent = refContent + $('div#' + requestedRefID + '_additionalContentStorageContainer').html(); 
refContent = refContent + '</div>'; 

// find last refPreviewImage in elements row and store in variable lastElementInRowID   
var lastElementInRowID = 0;  //... some more code to find lastElementInRowID ... 

// add refContent after last element in row and toggle in 

$('div#' + lastElementInRowID + '_ref').after(refContent); 
$('div#' + requestedRefID + '_refAdditionalContent').slideToggle(500); 

}

var removeRefContent = function() {

var removeRefContentDeferred = $.Deferred(); 

$('div.refAdditionalContent').slideToggle(500 , function() {   
    $('div.refAdditionalContent').remove(function() { 
     removeRefContentDeferred.resolve(); 
    });  
});  

return removeRefContentDeferred.promise();  

}

Beide Funktionen tun, was sie für gemeint sind. Das Problem tritt auf, wenn die Zeile

removeRefContent(). Then (appendRefContent2EndOfLine (clickedRefID));

wird angefordert. Ich möchte zuerst den Inhalt aller anderen Verweise entfernen (durch Ausblenden), und erst wenn fertig und $ ('div.refAdditionalContent') .remove erledigt ist, soll die andere Funktion, appendRefContent2EndOfLine, ausgeführt werden.

Ich lese viel Zeug über asynchrone und Warteschlangen und Sequenzen, aber verstehe einfach nicht, warum meine Lösung nicht funktioniert. Dies hat zur Folge, dass beide Funktionen gleichzeitig ausgeführt werden und zu Konflikten führen.

Bisher betrachte ich unter vielen anderen Lösungsansätzen den, den ich als den elegantesten gewählt habe. Aber ich bin sehr offen, um über Ihre Ideen zu lernen ...

Danke Jungs!

Prost Frank

Answer 1

Auch der aktualisierte Code:

Funktion zeigen zu steuern und Elementinhalt verstecken:

function displayRefContent (clickedRefID) {   
    if ($('div#' + clickedRefID + '_refAdditionalContent').length) { // check, if element is opened already, if yes then close only   
     removeRefContent();   
    } else {       
     if ($('div.refAdditionalContent').length) {  // check whether other element is opened and close first, before open another element      
      removeRefContent().then(appendRefContent2EndOfLine (clickedRefID));      
     } else {    
      appendRefContent2EndOfLine (clickedRefID); // if no other content element is opened, only open element     
     }   
    }    
} 

und die beiden Funktionen AT FIRST auszublenden und Objekt entfernen und DANACH anhängen und neues Objekt einblenden

var removeRefContent = function() {    
    var defRemoveContent = $.Deferred();   
    $('div.refAdditionalContent').slideToggle(500 , function()  
     $('div.refAdditionalContent').remove(); 
     defRemoveContent.resolve(); 
    });        
    return defRemoveContent.promise();  
} 

function appendRefContent2EndOfLine (requestedRefID) {    

    // get refContent from reference storage container (could be more elegant, but not relevant here) 
    var refContent = '<div id="' + requestedRefID + '_refAdditionalContent" class="refAdditionalContent">'; 
     refContent = refContent + $('div#' + requestedRefID + '_additionalContentStorageContainer').html(); 
    refContent = refContent + '</div>'; 

    var lastElementInRowID = ...; // some code to find last refPreviewImage in elements row and store in variable lastElementInRowID 

    // add refContent after last element in row and toggle in  
    $('div#' + lastElementInRowID + '_ref').after(refContent); 
    $('div#' + requestedRefID + '_refAdditionalContent').slideToggle(500);  

} 

Das Problem Dies ist bei displayRefContent der Fall, in dem bereits Inhalt geöffnet ist, der zuerst geschlossen und dann der neue Inhalt geöffnet werden muss. Es tut es zur gleichen Zeit, so dass ich die Reihenfolge und das Timing nicht beeinflussen kann (Funktion appendRefContent2EndOfLine, nachdem die Funktion removeRefContent beendet ist).

Fühlen Sie sich wie der blutigste Anfänger der Welt, frustriert und ohne weitere Ideen zu folgen. Überprüft auch, ob die Funktionalität von anderen Dingen beeinflusst wird, zum Beispiel das Dokument nicht vollständig geladen ist, dass der Inhalt nach document.ready() geladen wird. Ich sehe keine Auswirkungen.

Danke, hoffe jemand bereit ist, Frank