Chamar uma função após a conclusão da função anterior

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 function2chamada seja feita apenas após a function1conclusão?

Especifique um retorno de chamada anônimo e faça com que function1 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 o jQuery 1.5, poderá usar o novo padrão de adiados:

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

Editar: Link atualizado do blog:

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

Tente o seguinte:

function method1(){
   // some code

}

function method2(){
   // some code
}

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

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

As 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 este exemplo simples, mas para código mais complexo é muito melhor do que usar retornos de chamada. Você pode facilmente encadear várias chamadas assíncronas usando várias theninstruções:

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

Você também pode agrupar os adiadores do jQuery facilmente (retornados pelas $.ajaxchamadas):

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

Como observou @charlietfl, o jqXHRobjeto retornado por $.ajax()implementa a Promiseinterface. 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
});

Ou você pode acionar um evento personalizado quando uma função é 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 esse método, a função 'b' pode executar APÓS a função 'a', pois o gatilho só existe quando a função a termina de executar.

você pode fazer assim

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

Isso depende do que a função1 está fazendo.

Se a função1 estiver executando algum javascript sincronizado simples, como atualizar um valor div ou algo assim, a função2 será acionada após a conclusão da função1.

Se a função1 estiver fazendo uma chamada assíncrona, como uma chamada AJAX, você precisará criar um método de "retorno de chamada" (a maioria das APIs do ajax possui um parâmetro de função de retorno de chamada). Em seguida, chame function2 no retorno de chamada. por exemplo:

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

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

Se o método 1 precisar ser executado após o método 2, 3, 4. O trecho de código a seguir pode ser a solução para isso usando o objeto Adiado em 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>

Se function1 é alguma função de sincronização que você deseja transformar em uma assíncrona, porque leva algum tempo para concluir, e você não tem controle sobre ela para adicionar um retorno de chamada:

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

A saída será:

Click handled

... e após 2 segundos:

This is function 1
This is function 2

Isso funciona porque chamar window.setTimeout () adicionará uma tarefa ao loop de tarefas JS runtine, que é o que uma chamada assíncrona faz e porque o princípio básico de "execução até a conclusão" do tempo de execução JS garante que onClick () nunca é interrompido antes de terminar.

Observe que isso é tão engraçado quanto pode ser o código difícil de entender ...