Llamar a una función después de completar la función anterior

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 function2se llame solo después de que se function1haya completado?

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

Si está utilizando jQuery 1.5, puede utilizar el nuevo patrón de diferidos:

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

Editar: Enlace actualizado del blog:

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

Prueba esto :

function method1(){
   // some code

}

function method2(){
   // some code
}

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

Esta respuesta utiliza promises, una característica de JavaScript del ECMAScript 6estándar. Si su plataforma de destino no es compatible promises, complétela con PromiseJs .

Las promesas son una forma nueva (y mucho mejor) de manejar operaciones asincrónicas 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 un código más complejo es mucho mejor que usar devoluciones de llamada. Puede encadenar fácilmente múltiples llamadas asincrónicas utilizando múltiples thendeclaraciones:

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

También puede ajustar los aplazamientos de jQuery fácilmente (que se devuelven de las $.ajaxllamadas):

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

Como señaló @charlietfl, el jqXHRobjeto devuelto por $.ajax()implementa la Promiseinterfaz. Por lo tanto, no es realmente necesario envolverlo en un Promise, se puede usar directamente:

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

O puede activar un evento personalizado cuando se completa una función, 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);

Con este método, la función 'b' solo puede ejecutarse DESPUÉS de la función 'a', ya que el disparador solo existe cuando la función a termina de ejecutarse.

puedes hacerlo asi

$.when(funtion1()).then(function(){
    funtion2();
})

Esto depende de qué función esté haciendo.

Si function1 está haciendo un javascript sincrónico simple, como actualizar un valor div o algo así, function2 se activará después de que se haya completado function1.

Si function1 está haciendo una llamada asincrónica, como una llamada AJAX, deberá crear un método de "devolución de llamada" (la mayoría de las API de ajax tienen un parámetro de función de devolución de llamada). Luego llame a function2 en la devolución de llamada. p.ej:

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

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

Si el método 1 tiene que ejecutarse después de los métodos 2, 3, 4. El siguiente fragmento de código puede ser la solución para esto usando el objeto diferido en JavaScript.

function method1(){
  var dfd = new $.Deferred();
     setTimeout(function(){
     console.log("Inside Method - 1"); 
     method2(dfd);	 
    }, 5000);
  return dfd.promise();
}

function method2(dfd){
  setTimeout(function(){
   console.log("Inside Method - 2"); 
   method3(dfd);	
  }, 3000);
}

function method3(dfd){
  setTimeout(function(){
   console.log("Inside Method - 3"); 	
   dfd.resolve();
  }, 3000);
}

function method4(){   
   console.log("Inside Method - 4"); 	
}

var call = method1();

$.when(call).then(function(cb){
  method4();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Si function1 es alguna función de sincronización que desea convertir en una asíncrona porque lleva un tiempo completarla, y no tiene control sobre ella para agregar una devolución de llamada:

function function1 (someVariable) {
    var date = Date.now ();
    while (Date.now () - date < 2000);      // function1 takes some time to complete
    console.log (someVariable);
}
function function2 (someVariable) {
    console.log (someVariable);
}
function onClick () {
    window.setTimeout (() => { function1 ("This is function1"); }, 0);
    window.setTimeout (() => { function2 ("This is function2"); }, 0);
    console.log ("Click handled");  // To show that the function will return before both functions are executed
}
onClick ();

El resultado será:

Click handled

... y después de 2 segundos:

This is function 1
This is function 2

Esto funciona porque llamar a window.setTimeout () agregará una tarea al bucle de tareas de rutina JS, que es lo que hace una llamada asíncrona, y porque el principio básico de "ejecución hasta la finalización" del tiempo de ejecución de JS asegura que onClick () nunca se interrumpe antes de que termine.

Tenga en cuenta que esto es tan divertido como puede ser difícil de entender el código ...