Chame uma function após a function anterior estar completa

Eu tenho o seguinte código JavaScript:

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

Como posso garantir que a function2 seja chamada somente após a conclusão da function1?

Especifique um retorno de chamada anônimo e faça a function 1 aceitá-lo:

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

Se você estiver usando o jQuery 1.5, poderá usar o novo padrão Deferreds:

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

Editar: link do blog atualizado:

Rebecca Murphy escreveu um ótimo artigo sobre isso aqui: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Esta resposta usa promises , um recurso JavaScript do padrão ECMAScript 6 . Se a sua plataforma de destino não suportar promises , faça o polyfill com o PromiseJs .

Promessas são uma maneira nova (e muito melhor) de lidar com operações assíncronas em JavaScript:

 $('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 }); } 

Isso pode parecer uma sobrecarga significativa para esse exemplo simples, mas para um código mais complexo é muito melhor do que usar retornos de chamada. Você pode facilmente encadear várias chamadas assíncronas usando várias instruções:

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

Você também pode agrupar os adiamentos do jQuery facilmente (que são retornados das chamadas $.ajax ):

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

Como @charlietfl observou, o object jqXHR retornado por $.ajax() implementa a interface Promise . Portanto, não é realmente necessário envolvê-lo em um Promise , ele pode ser usado diretamente:

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

Tente isto:

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

Ou você pode acionar um evento personalizado quando uma function for concluída e vinculá-lo ao documento:

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

Usando este método, a function ‘b’ só pode executar a function AFTER ‘a’, já que o gatilho só existe quando a function a termina a execução.

Isso depende do que a function1 está fazendo.

Se function1 estiver fazendo algum javascript synchrounous simples, como atualizar um valor div ou algo assim, function2 será acionado após a function1 ser concluída.

Se function1 estiver fazendo uma chamada assíncrona, como uma chamada AJAX, você precisará criar um método de “retorno de chamada” (a maioria dos APIs do ajax tem um parâmetro de function de retorno de chamada). Em seguida, chame function2 no retorno de chamada. por exemplo:

 function1() { new AjaxCall(ajaxOptions, MyCallback); } function MyCallback(result) { function2(result); } 

Eu tive um problema com isso. Apesar de usar o código acima, não estava funcionando. Mais tarde, com outras pessoas, percebi que minha primeira function era assíncrona e a segunda function era síncrona.

Por isso, o asynchronous estava sendo executado após a function síncrona, apesar do código que eu escrevi.

Eu encontrei uma solução no meu caso, chamando a segunda function no final da minha primeira function.