Come si esegue una funzione Javascript richiede un valore dopo che una funzione onload è stata completata che fornisce il valore?

Question

So che è una lunga domanda, quindi permettimi di spiegarti nel miglior modo possibile.

Ho due funzioni javascript che voglio eseguire dopo il caricamento della pagina, le chiameremo function1() e function2().

function1() utilizza AJAX per recuperare informazioni dal database che organizzerà il contenuto in un div dalle informazioni ottenute nel database. Restituisce anche i contenuti dal database una volta che la funzione è terminata.

function2() richiede il valore dal database per funzionare correttamente, quindi è necessario attendere che function1() restituisca il suo valore prima dell'esecuzione di function2(). Purtroppo il mio codice non funziona, e senza entrare troppo nel dettaglio, qui di seguito è uno schema del codice:

function function1() { 
if (some_cookie_exists) { 
    //run some code 
} else { 
    //send parameters through "POST" 
    xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    var a = some_value_from_database; 
    // change div content 
    return a; 
    } 
    } 
//sending parameters 
} 
function function2(a) { 
//run code that depends on value of "a" 
} 

window.onload = function() { 
var data = function1(); 
function2(data); 

L'errore che ottengo è che i dati var non è definito. function1() recupera i dati con successo e funziona come volevo, ma function2() non viene eseguito affatto, perché il valore è mancante. Qualcuno può capire perché sto ricevendo questo e come dovrei fare per risolvere questo?

NOTA: In realtà ho solo familiarità con Javascript (ancora inesperto in questo), non so sostanzialmente nulla su JQuery, quindi se lo usi per correggere il codice, ti prego spiegami perché funziona (mi salverà problemi successivi)

Answer 1

AJAX è asincrono (è ciò che rappresenta la prima A). I risultati dell'operazione AJAX non sono disponibili in function1(), vengono recuperati nel gestore onreadystatechange che si collega all'oggetto XMLHttpRequest. Quindi non è chiaro come si potrebbe fare

var a = some_value_from_database; 

in function1().

Quello che devi fare è chiamare il numero function2() dal gestore onreadystatechange.

Se pubblichi l'implementazione effettiva di function1, potremmo essere in grado di fornire dettagli più specifici.

UPDATE:

Ecco come chiamare function2() quando il valore diventa disponibile dalla chiamata AJAX:

xmlhttp.onreadystatechange = function() { 
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
     var a = some_value_from_database; 
     function2(a); 
    } 
} 

Answer 2

fa con un callback.

function function1(callback) { 
    /* ... */ 
    callback(data); // instead of return 
} 
var function2 = function(data) { // important: make "function2" a variable so that it can be passed as an argument later on 
    /* ... */ 
}  
window.onload = function() { 
    function1(function2); // important: no parentheses after function2, otherwise it would be executed right away 
} 

Answer 3

Poiché ajax per definizione è asincrona, function2 inizierà esecuzione prima del completamento ajax in function1. JQuery sarebbe utile qui, dato che puoi inserire function2 nella callback di successo della chiamata ajax in function1.

Così includono JQuery nel tuo codice HTML e il seguente JS dovrebbe funzionare:

$(function() { //same as onload 
     function1() ; 
} 

function function1() { 
     $.ajax({ 
       url: "url here", 
       type: "GET", 
       success: function(data) { // data is what is returned in ajax response 
          // rearrange divs 
          function2(data); 
       } 
      }); 
); 

function function2(data) { 
} 

più sulla funzione ajax JQuery qui: http://api.jquery.com/jQuery.ajax/

Non