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 Funktion 2 erst aufgerufen wird, wenn Funktion 1 abgeschlossen ist?
Geben Sie einen anonymen Rückruf an und lassen Sie function1 diesen 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);
}
});
Edit: Aktualisierter Blog-Link:
Rebecca Murphy hat hier einen großartigen Bericht darüber geschrieben: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
Dies hängt davon ab, was die Funktion1 tut.
Wenn function1 tut einige einfache synchrounous Javascript, wie ein div-Wert oder etwas zu aktualisieren, dann function2 wird Feuer nach function1 abgeschlossen hat.
Wenn function1 macht einen asynchronen Aufruf, wie ein AJAX-Aufruf, müssen Sie eine "callback" Methode (die meisten Ajax API' s haben einen Callback-Funktion Parameter) zu erstellen. Dann rufen Sie function2 im Callback auf. z.B:
function1()
{
new AjaxCall(ajaxOptions, MyCallback);
}
function MyCallback(result)
{
function2(result);
}