Tengo el siguiente código JavaScript:
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable);
function2(someOtherVariable);
}
else {
doThis(someVariable);
}
});
¿Cómo puedo asegurarme de que la función2
sea llamada sólo después de que la función1
haya terminado?
Especificar una llamada de retorno anónima, y hacer que la función1 la acepte:
$('a.button').click(function(){
if (condition == 'true'){
function1(someVariable, function() {
function2(someOtherVariable);
});
}
else {
doThis(someVariable);
}
});
function function1(param, callback) {
...do stuff
callback();
}
Si utiliza jQuery 1.5 puede utilizar el nuevo patrón Deferreds:
$('a.button').click(function(){
if(condition == 'true'){
$.when(function1()).then(function2());
}
else {
doThis(someVariable);
}
});
Edición: Enlace del blog actualizado:
Rebecca Murphy tenía un gran escrito sobre esto aquí: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/
Esto depende de lo que haga la función1.
Si la función1 está haciendo un simple javascript sincronizado, como la actualización de un valor div o algo así, entonces la función2 se disparará después de que la función1 se haya completado.
Si function1 está haciendo una llamada asíncrona, como una llamada AJAX, necesitarás crear un método "callback" (la mayoría de las API ajax' tienen un parámetro de función callback). A continuación, llame a la función2 en la devolución de llamada. eg:
function1()
{
new AjaxCall(ajaxOptions, MyCallback);
}
function MyCallback(result)
{
function2(result);
}