Rufen Sie eine Funktion auf, nachdem die vorherige Funktion abgeschlossen wurde

Ich habe den folgenden JavaScript-Code:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable);
        function2(someOtherVariable);
    }
    else {
        doThis(someVariable);
    }
});

Wie kann ich sicherstellen, dass der function2Aufruf erst nach function1Abschluss erfolgt?

Geben Sie einen anonymen Rückruf an und lassen Sie function1 ihn akzeptieren:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable, function() {
          function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
  ...do stuff
  callback();
} 

Wenn Sie jQuery 1.5 verwenden, können Sie das neue Deferreds-Muster verwenden:

$('a.button').click(function(){
    if(condition == 'true'){
        $.when(function1()).then(function2());
    }
    else {
        doThis(someVariable);
    }
});

Bearbeiten: Aktualisierter Blog-Link:

Rebecca Murphy hatte hier eine großartige Zusammenfassung: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Versuche dies :

function method1(){
   // some code

}

function method2(){
   // some code
}

$.ajax({
   url:method1(),
   success:function(){
   method2();
}
})

Diese Antwort verwendet promiseseine JavaScript-Funktion des ECMAScript 6Standards. Wenn Ihre Zielplattform dies nicht unterstützt promises, füllen Sie sie mit PromiseJs .

Versprechen sind eine neue (und viel bessere) Möglichkeit, asynchrone Operationen in JavaScript zu handhaben:

$('a.button').click(function(){
    if (condition == 'true'){
        function1(someVariable).then(function() {
            //this function is executed after function1
            function2(someOtherVariable);
        });
    }
    else {
        doThis(someVariable);
    }
});


function function1(param, callback) {
    return new Promise(function (fulfill, reject){
        //do stuff
        fulfill(result); //if the action succeeded
        reject(error); //if the action did not succeed
    });
} 

Dies mag für dieses einfache Beispiel als erheblicher Aufwand erscheinen, für komplexeren Code ist es jedoch weitaus besser als die Verwendung von Rückrufen. Sie können mehrere asynchrone Aufrufe einfach mit mehreren thenAnweisungen verketten:

function1(someVariable).then(function() {
    function2(someOtherVariable);
}).then(function() {
    function3();
});

Sie können jQuery-Verzögerungen auch einfach umbrechen (die von $.ajaxAufrufen zurückgegeben werden):

Promise.resolve($.ajax(...params...)).then(function(result) {
    //whatever you want to do after the request
});

Wie @charlietfl feststellte, implementiert das jqXHRvon zurückgegebene Objekt $.ajax()die PromiseSchnittstelle. Es ist also eigentlich nicht notwendig, es in ein zu wickeln Promise, es kann direkt verwendet werden:

$.ajax(...params...).then(function(result) {
    //whatever you want to do after the request
});

Oder Sie können ein benutzerdefiniertes Ereignis auslösen, wenn eine Funktion abgeschlossen ist, und es dann an das Dokument binden:

function a() {
    // first function code here
    $(document).trigger('function_a_complete');
}

function b() {
    // second function code here
}

$(document).bind('function_a_complete', b);

Mit dieser Methode kann die Funktion 'b' erst NACH der Funktion 'a' ausgeführt werden, da der Trigger nur vorhanden ist, wenn die Ausführung der Funktion a abgeschlossen ist.

Dies hängt davon ab, was function1 tut.

Wenn Funktion1 ein einfaches synchrones Javascript ausführt, z. B. das Aktualisieren eines Div-Werts oder ähnliches, wird Funktion2 nach Abschluss von Funktion1 ausgelöst.

Wenn function1 einen asynchronen Aufruf ausführt, z. B. einen AJAX-Aufruf, müssen Sie eine "Rückruf" -Methode erstellen (die meisten Ajax-APIs haben einen Rückruffunktionsparameter). Rufen Sie dann function2 im Rückruf auf. z.B:

function1()
{
  new AjaxCall(ajaxOptions, MyCallback);
}

function MyCallback(result)
{
  function2(result);
}

Sie können es so machen

$.when(funtion1()).then(function(){
    funtion2();
})

Wenn Methode 1 nach Methode 2, 3, 4 ausgeführt werden muss. Das folgende Codefragment kann die Lösung hierfür sein, indem das Objekt "Zurückgestellt" in JavaScript verwendet wird.

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Wenn function1 eine Synchronisierungsfunktion ist, die Sie in eine asynchrone Funktion umwandeln möchten, da die Ausführung einige Zeit in Anspruch nimmt und Sie keine Kontrolle darüber haben, um einen Rückruf hinzuzufügen:

function function1 (someVariable) {
    var date = Date.now ();
    while (Date.now () - date < 2000);      // function1 takes some time to complete
    console.log (someVariable);
}
function function2 (someVariable) {
    console.log (someVariable);
}
function onClick () {
    window.setTimeout (() => { function1 ("This is function1"); }, 0);
    window.setTimeout (() => { function2 ("This is function2"); }, 0);
    console.log ("Click handled");  // To show that the function will return before both functions are executed
}
onClick ();

Die Ausgabe wird sein:

Click handled

... und nach 2 Sekunden:

This is function 1
This is function 2

Dies funktioniert, weil durch das Aufrufen von window.setTimeout () der JS-Runtine-Taskschleife eine Aufgabe hinzugefügt wird, wie dies bei einem asynchronen Aufruf der Fall ist, und weil das Grundprinzip der "Run-to-Completion" der JS-Laufzeit sicherstellt, dass onClick () wird nie unterbrochen, bevor es endet.

Beachten Sie, dass dies so lustig wie der Code schwer zu verstehen sein mag ...