Chiamare una funzione al termine della funzione precedente

Ho il seguente codice JavaScript:

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

Come posso assicurarmi che function2venga chiamato solo dopo che function1è stato completato?

Specificare un callback anonimo e far accettare a function1:

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


function function1(param, callback) {
  ...do stuff
  callback();
} 

Se stai usando jQuery 1.5 puoi usare il nuovo modello Deferreds:

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

Modifica: collegamento blog aggiornato:

Rebecca Murphy ha scritto molto su questo qui: http://rmurphey.com/blog/2010/12/25/deferreds-coming-to-jquery/

Prova questo :

function method1(){
   // some code

}

function method2(){
   // some code
}

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

Questa risposta utilizza promisesuna funzionalità JavaScript dello ECMAScript 6standard. Se la tua piattaforma di destinazione non supporta promises, esegui il polyfill con PromiseJs .

Le promesse sono un nuovo (e molto migliore) modo per gestire le operazioni asincrone in 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
    });
} 

Questo può sembrare un notevole sovraccarico per questo semplice esempio, ma per un codice più complesso è molto meglio dell'uso dei callback. Puoi facilmente concatenare più chiamate asincrone usando più thenistruzioni:

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

Puoi anche avvolgere facilmente i rinvii jQuery (che vengono restituiti dalle $.ajaxchiamate):

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

Come notato da @charlietfl, l' jqXHRoggetto restituito da $.ajax()implementa l' Promiseinterfaccia. Quindi non è effettivamente necessario avvolgerlo in un Promise, può essere utilizzato direttamente:

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

Oppure puoi attivare un evento personalizzato al completamento di una funzione, quindi associarlo 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);

Utilizzando questo metodo, la funzione 'b' può eseguire solo la funzione DOPO 'a', poiché il trigger esiste solo al termine dell'esecuzione della funzione a.

puoi farlo in questo modo

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

Questo dipende da cosa sta facendo function1.

Se function1 sta eseguendo un semplice javascript sincrono, come l'aggiornamento di un valore div o qualcosa del genere, allora function2 si attiverà al completamento di function1.

Se function1 sta effettuando una chiamata asincrona, come una chiamata AJAX, sarà necessario creare un metodo di "callback" (la maggior parte delle API di ajax ha un parametro di funzione di callback). Quindi chiamare function2 nel callback. per esempio:

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

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

Se il metodo 1 deve essere eseguito dopo il metodo 2, 3, 4. Il seguente frammento di codice può essere la soluzione per questo utilizzando l'oggetto differito in 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 è una funzione di sincronizzazione che si desidera trasformare in una asincrona perché richiede del tempo per il completamento e non si ha alcun controllo su di essa per aggiungere un callback:

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

L'output sarà:

Click handled

... e dopo 2 secondi:

This is function 1
This is function 2

Questo funziona perché chiamando window.setTimeout () aggiungerà un'attività al ciclo delle attività runtine JS, che è ciò che fa una chiamata asincrona, e perché il principio di base del "run-to-completamento" del runtime JS assicura che onClick () non viene mai interrotto prima della fine.

Si noti che questo è tanto divertente quanto potrebbe essere difficile capire il codice ...