如何在执行后续代码之前先执行函数调用？

Question

我想通过构建一个随机报价机来学习JS，但这个问题一直在窃听我。我看到了其他答案，但由于缺乏背景，我实在无法理解它们。任何帮助将不胜感激。该代码是：

$(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()不会被时间完成JavaScript执行的下一行，var quoteData = jSonify();。这是因为它内部有一个$.ajax调用，可能需要很长时间才能完成。

getQuote将不会完成，直到调用$.ajax方法中的success方法。

所以，你需要做的是传递一个回调到getQuote，就像这样：一旦阿贾克斯真正完成

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

回调才会被调用。一旦被调用，其余的计算就会发生。

Answer 2

可以嵌入AJAX成功以后里面被称为陈述

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