Javascript / Jquery: appeler une fonction une fois la fonction précédente terminée

Question

Ok, il est 1 heure du matin, je suis nul à coder en javascript, et je n'arrive pas à trouver une solution claire où que ce soit.

C'est essentiellement ce que j'ai:

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

Comment puis-je m'assurer que "function2" n'est appelé qu'après la fin de "function1"?

Answer 1

Spécifiez un rappel anonyme et assurez-vous que function1 l'accepte:

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


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

Answer 2

Si vous utilisez jQuery 1.5, vous pouvez utiliser le nouveau modèle différé:

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

Edit: lien de blog mis à jour:

Rebecca Murphy a rédigé un excellent article à ce sujet ici: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Answer 3

Essaye ça :

 function method1(){
   // some code

}

function method2(){
   // some code
}

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

Answer 4

Ou vous pouvez déclencher un événement personnalisé quand une fonction est terminée, puis le lier au document:

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

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

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

En utilisant cette méthode, la fonction 'b' ne peut exécuter la fonction APRES que 'a', car le déclencheur n'existe que lorsque l'exécution de la fonction a est terminée.

Answer 5

Cela dépend de ce que fait la fonction1.

Si function1 exécute un script javascript synchrone simple, comme la mise à jour d'une valeur div ou quelque chose d'autre, alors function2 se déclenche une fois que function1 est terminé.

Si function1 effectue un appel asynchrone, tel qu'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 rappel. par exemple:

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

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