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

我试图通过构建一个随机报价机来学习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];
}});

---

您可以在ajaxsuccess中嵌入稍后要调用的语句

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

---

您可以在ajaxsuccess中嵌入稍后要调用的语句

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

当JavaScript运行下一行时，

var quoteData=jSonify（）将无法完成
getQuote（）。这是因为它内部有一个
$.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");
        }
    });
}

只有在ajax实际完成后才会调用回调。调用后，将进行其余的计算。
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");
        }
    });
}

只有在ajax实际完成后才会调用回调。一旦它被调用，其余的计算将进行。
我可以这样做，事实上这也是我提出的解决方案。但是我希望代码的结构更好/模块化，所以我放弃了它。谢谢你的帮助。我能做到，事实上这也是我想出的解决办法。但是我希望代码的结构更好/模块化，所以我放弃了它。谢谢你的帮助。我在尝试解决这个问题时学习了回调函数，但不知何故，我无法在自己的代码中使用它。谢谢你教我。我现在就来试试，希望能掌握回调函数的概念，我终于明白了。我使用另一个函数作为参数调用getQuote，当getQuote运行“success”部分时，该部分包含对参数的调用，它运行的参数本身就是一个函数，这正是我所需要的。哇，太好了！！再次感谢。我在尝试解决这个问题时学习了回调函数，但不知何故，我无法在自己的代码中使用它。谢谢你教我。我现在就来试试，希望能掌握回调函数的概念，我终于明白了。我使用另一个函数作为参数调用getQuote，当getQuote运行“success”部分时，该部分包含对参数的调用，它运行的参数本身就是一个函数，这正是我所需要的。哇，太好了！！再次感谢你。