Έχω τον ακόλουθο κώδικα JavaScript:
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable);
function2(someOtherVariable);
}
else {
doThis(someVariable);
}
});
Πώς μπορώ να διασφαλίσω ότι η function2
καλείται μόνο αφού ολοκληρωθεί η function1
;
Καθορίστε μια ανώνυμη επανάκληση και κάντε τη function1 να την αποδεχτεί:
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable, function() {
function2(someOtherVariable);
});
}
else {
doThis(someVariable);
}
});
function function1(param, callback) {
...do stuff
callback();
}
Εάν χρησιμοποιείτε την jQuery 1.5, μπορείτε να χρησιμοποιήσετε το νέο μοτίβο Deferreds:
$('a.button').click(function(){
if(condition == 'true'){
$.when(function1()).then(function2());
}
else {
doThis(someVariable);
}
});
Επεξεργασία: Ενημερώθηκε ο σύνδεσμος του ιστολογίου:
Η Rebecca Murphy είχε ένα εξαιρετικό άρθρο σχετικά με αυτό εδώ: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
Αυτό εξαρτάται από το τι κάνει η function1.
Εάν η συνάρτηση1 κάνει κάποια απλή συγχρονική javascript, όπως η ενημέρωση μιας τιμής div ή κάτι τέτοιο, τότε η συνάρτηση2 θα πυροδοτηθεί αφού ολοκληρωθεί η συνάρτηση1.
Εάν η function1 πραγματοποιεί μια ασύγχρονη κλήση, όπως μια κλήση AJAX, θα πρέπει να δημιουργήσετε μια μέθοδο "callback" (τα περισσότερα API ajax's έχουν μια παράμετρο συνάρτησης callback). Στη συνέχεια, καλέστε τη συνάρτηση function2 στο callback. π.χ:
function1()
{
new AjaxCall(ajaxOptions, MyCallback);
}
function MyCallback(result)
{
function2(result);
}