J'ai le code JavaScript suivant :
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable);
function2(someOtherVariable);
}
else {
doThis(someVariable);
}
});
Comment puis-je m'assurer que la fonction 2 ne sera appelée qu'une fois la fonction 1 terminée ?
Spécifiez un callback anonyme, et faites en sorte que la fonction1 l'accepte :
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable, function() {
function2(someOtherVariable);
});
}
else {
doThis(someVariable);
}
});
function function1(param, callback) {
...do stuff
callback();
}
Si vous utilisez jQuery 1.5, vous pouvez utiliser le nouveau modèle Deferreds :
$('a.button').click(function(){
if(condition == 'true'){
$.when(function1()).then(function2());
}
else {
doThis(someVariable);
}
});
Edit : Mise à jour du lien du blog:
Rebecca Murphy a rédigé un excellent article sur ce sujet ici : http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
Cela dépend de ce que fait la fonction1.
Si la fonction 1 exécute un simple javascript synchrone, comme la mise à jour d'une valeur de div ou autre, alors la fonction 2 se déclenchera après la fin de la fonction 1.
Si la fonction 1 effectue un appel asynchrone, comme un appel AJAX, vous devrez créer une méthode "callback" ; (la plupart des API ajax ont un paramètre de fonction callback). Ensuite, appelez function2 dans le callback. ex :
function1()
{
new AjaxCall(ajaxOptions, MyCallback);
}
function MyCallback(result)
{
function2(result);
}