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 função2
só é chamada após a função1
estar concluída?
Especifique um retorno de chamada anônimo e faça com que a função1 a aceite:
$('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 jQuery 1.5 você pode usar o novo padrão Deferreds:
$('a.button').click(function(){
if(condition == 'true'){
$.when(function1()).then(function2());
}
else {
doThis(someVariable);
}
});
Editar: Link do blog actualizado:
Rebecca Murphy teve um excelente artigo sobre isto aqui: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
Isto depende da função1 que está a fazer.
Se a função1 está fazendo algum javascript sincrônico simples, como atualizar um valor div ou algo assim, então a função2 irá disparar após a função1 ter sido completada.
Se a função1 está fazendo uma chamada assíncrona, tal como uma chamada AJAX, você precisará criar um "callback" método (a maioria dos ajax API's tem um parâmetro de função de callback). Em seguida, chame a função de chamada de retorno2 na callback, por exemplo:
function1()
{
new AjaxCall(ajaxOptions, MyCallback);
}
function MyCallback(result)
{
function2(result);
}