Wie führe ich einen Funktionsaufruf zuerst aus, bevor ich nachfolgende Codes ausführe?

Question

Ich versuche JS zu lernen, indem ich eine zufällige Quote Machine erstelle, aber dieses Problem hat mich nervt. Ich sah die anderen Antworten, aber ich konnte sie aufgrund des fehlenden Kontextes wirklich nicht verstehen. Jede Hilfe wird geschätzt. Der Code ist:

$(document).ready(function() { 


$("#btn").click(function() { 
getQuote();     //This should execute first, then the next lines 
var quoteData = jSonify(); 
var quote = quoteData[0]; 
var author = quoteData[1]; 
console.log(quote); 
console.log(author); 
console.log("Button Clicked");//This Should execute last. 
}); 

//Get them quotes 
function getQuote() { 
    $.ajax({ 
     url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous', 
     type: 'GET', 
     data: {}, 
     datatype: 'json', 
     success: function (data) { jSonify(data); }, 
     error: function (err) { alert(err); }, 
     beforeSend: function (xhr) { 
      xhr.setRequestHeader("X-Mashape-Authorization", "qKPbfOzWKemsh2qi30QgbOA1WufXp1ok1NsjsnAkvh6yVJfaAk"); 
     } 
    }); 
} 

//Convert to jSon 
function jSonify(rawData) { 
    var jSonified = jQuery.parseJSON(rawData); 
    var quote = jSonified.quote; 
    var author = jSonified.author; 
    console.log(quote); 
    console.log(author); 
    return [quote, author]; 
}}); 

Answer 1

getQuote() nicht von der Zeit durchgeführt werden JavaScript läuft die nächste Zeile, var quoteData = jSonify(); genannt Aussagen werden. Dies ist, weil es einen $.ajax Aufruf innerhalb davon hat, der eine lange Zeit dauern könnte, um abzuschließen.

getQuote wird nicht durchgeführt, bis die success Methode in der $.ajax Methode aufgerufen wird.

Also, was Sie tun müssen, um einen Rückruf in getQuote passieren, etwa so:

$("#btn").click(function() { 
    getQuote(function() { 
     var quoteData = jSonify(); 
     var quote = quoteData[0]; 
     var author = quoteData[1]; 
     console.log(quote); 
     console.log(author); 
     console.log("Button Clicked"); 
    }); 
}); 

//Get them quotes 
function getQuote(done) { 
    $.ajax({ 
     url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous', 
     type: 'GET', 
     data: {}, 
     datatype: 'json', 
     success: function (data) { jSonify(data); done(); }, // Call the callback! 
     error: function (err) { alert(err); }, 
     beforeSend: function (xhr) { 
      xhr.setRequestHeader("X-Mashape-Authorization", "qKPbfOzWKemsh2qi30QgbOA1WufXp1ok1NsjsnAkvh6yVJfaAk"); 
     } 
    }); 
} 

Der Rückruf wird nur einmal die Ajax beendet tatsächlich aufgerufen werden. Sobald es aufgerufen wird, wird der Rest der Berechnung stattfinden.

Answer 2

Sie können später einbetten innerhalb Ajax Erfolg

$(document).ready(function() { 


$("#btn").click(function() { 
getQuote();     //This should execute first, then the next lines 

}); 

//Get them quotes 
function getQuote() { 
    $.ajax({ 
     url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=famous', 
     type: 'GET', 
     data: {}, 
     datatype: 'json', 
     success: function (data) {   
      var quoteData = jSonify(data); 
      var quote = quoteData[0]; 
      var author = quoteData[1]; 
      console.log(quote); 
      console.log(author); 
      console.log("Button Clicked");//This Should execute last. 
     }, 
     error: function (err) { alert(err); }, 
     beforeSend: function (xhr) { 
      xhr.setRequestHeader("X-Mashape-Authorization", "qKPbfOzWKemsh2qi30QgbOA1WufXp1ok1NsjsnAkvh6yVJfaAk"); 
     } 
    }); 
} 

//Convert to jSon 
function jSonify(rawData) { 
    var jSonified = jQuery.parseJSON(rawData); 
    var quote = jSonified.quote; 
    var author = jSonified.author; 
    console.log(quote); 
    console.log(author); 
    return [quote, author]; 
}});