javascript - validacion - Llamar a una función después de que se haya completado la función anterior

tipos de funciones en javascript

Question

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 se llame a la función2 solo después de function1 haya completado la función1?

Answer 1

Esta respuesta usa promises , una característica de JavaScript del estándar ECMAScript 6 . Si su plataforma objetivo no es compatible con las promises , PromiseJs con PromiseJs .

Las promesas son una forma nueva (y mucho mejor) de manejar operaciones asíncronas en 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
});
}

Esto puede parecer una sobrecarga significativa para este ejemplo simple, pero para código más complejo es mucho mejor que usar devoluciones de llamada. Puede encadenar fácilmente varias llamadas asincrónicas usando múltiples declaraciones a then :

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

También puede ajustar jQuery deferrds fácilmente (que se devuelven desde llamadas $.ajax ):

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

Answer 2

Especifique una devolución de llamada anónima y haga que function1 lo acepte:

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

Answer 3

Esto depende de qué función1 está haciendo.

Si function1 está haciendo un javascript síncrono simple, como actualizar un valor div o algo así, entonces la función2 se activará después de que la función 1 se haya completado.

Si la función 1 está realizando una llamada asíncrona, como una llamada AJAX, deberá crear un método de "devolución de llamada" (la mayoría de las API ajax tienen un parámetro de función de devolución de llamada). Luego llama a function2 en la devolución de llamada. p.ej:

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

Answer 4

O puede activar un evento personalizado cuando se completa una función y luego vincularlo al 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, la función ''b'' solo puede ejecutar DESPUÉS de la función ''a'', ya que el disparador solo existe cuando la función a se termina de ejecutar.

Answer 5

Prueba esto :

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

Answer 6

Si está utilizando jQuery 1.5, puede usar el nuevo patrón Deferreds:

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

Editar: Enlace de blog actualizado:

Rebecca Murphy hizo una excelente reseña sobre esto aquí: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Answer 7

Tuve un problema con esto A pesar de usar el código anterior, no estaba funcionando. Más tarde, con la ayuda de otros, me di cuenta de que mi primera función era asincrónica y la segunda función era sincrónica.

De ahí que el asincrónico se ejecutara después de la función sincrónica a pesar del código que escribí.

Encontré una solución en mi caso llamando a la segunda función al final de mi primera función.