var在函数内未接收到正确的值-Javascript

我有一个名为getQuotes（）的函数，它的末尾有一个console.log（），显示了currentQuote的正确值

function getQuote() {
      $.ajax({
            headers: {
              "X-Mashape-Key": "xxx",
              Accept: "application/json",
              "Content-Type": "application/x-www-form-urlencoded"
            },
            url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
            success: function(response) {
                  var r = JSON.parse(response);      
                  currentQuote = r.quote;
                  currentAuthor = r.author; 
                  console.log(currentQuote);             
            }
      });
};

关键是：当我调用getFunction（）（如下面的代码）时，然后显示我的变量currentQuote的控制台.log，它没有收到正确的值，它仍然是声明的空字符串。我做错了什么

$(document).ready(function() {  
    var currentQuote='';
    var currentAuthor='';             
    getQuote();  
    console.log(currentQuote);        
});

---

你有两个不同的问题

首先，从准备文档的回调中删除最后一个

console.log

，并允许AJAX请求的成功回调为您进行日志记录

其次，您有两组

currentQuote

和

currentAuthor

变量：一组全局变量和一组局部作用于文档就绪回调的变量。您应该明确地将每个变量定义为全局属性，如下所示，以防止冲突：

$(document).ready(function() {  
    window.currentQuote = ''
    window.currentAuthor = ''             
    getQuote()        
});

function getQuote(cb) {
    $.ajax({
        headers: {
            "X-Mashape-Key": "xxx",
            Accept: "application/json",
            "Content-Type": "application/x-www-form-urlencoded"
        },
        url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
        success: function (response) {
              var r = JSON.parse(response)     
              window.currentQuote = r.quote
              window.currentAuthor = r.author 
              console.log(currentQuote)     
        }
    })
}

---

如果你想做的不仅仅是记录引用和作者，有几种方法可以让你的生活更轻松：回访和承诺

回调是一个函数，它作为参数传递给另一个（异步）函数，并在异步过程完成时使用一些“返回”值（如引号和作者）调用。这里，我使用

resolve

作为回调函数

$(document).ready(function() {            
    getQuote(function (quote, author) {
        // callback -- do stuff with `quote` and `author`
        console.log(quote, author)
    })
})

function getQuote(resolve) {
    $.ajax({
        headers: {
            "X-Mashape-Key": "xxx",
            Accept: "application/json",
            "Content-Type": "application/x-www-form-urlencoded"
        },
        url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
        success: function (response) {
              var result = JSON.parse(response)     
              resolve(r.quote, r.author)   
        }
    })
}

承诺是处理异步代码的一种更为现代的方式，但默认情况下它们也不太受广泛支持（这可以通过polyfill进行修正）。承诺不在本回答的范围内，但如果您想要更多信息，我建议您签出。

因为

getQuote（）

使用Ajax调用，当您调用

getQuote（）

时，操作将异步进行。这意味着当

getQuote（）

返回时，结果还不可用。您可以通过将回调函数作为参数提供给

getQuote（）

并从

success

函数调用该函数来解决此问题：

function getQuote(callback) {
    $.ajax({
        headers: {
          "X-Mashape-Key": "xxx",
          "Accept": "application/json",
          "Content-Type": "application/x-www-form-urlencoded"
        },
        url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
        success: function(response) {
              var r = JSON.parse(response);      
              callback(r.quote, r.author); // Report success to the caller
        }
    });
};

然后：

这也消除了对全局

currentQuote

和

currentAuthor

变量的需要。（如果其他地方需要这些值，则始终可以在回调中分配这些值。）

备选方案

您可以从

getQuote

返回

Promise

，并修改Ajax调用以调用Promise的

resolve

方法。这在接受答案的线程中描述，该线程是重复的

因为您使用的是jQuery，传递回调函数的另一种替代方法是返回

ajax

对象本身，它有一个方便的

done（result）

属性：

function getQuote() {
    return $ajax({
        headers: {
          "X-Mashape-Key": "xxx",
          "Accept": "application/json",
          "Content-Type": "application/x-www-form-urlencoded"
        },
        url: 'https://andruxnet-random-famous-quotes.p.mashape.com/?cat=movies',
    });
}

然后使用：

$(document).ready(function() {
    getQuote().done(function(result) {
        if (result) {
            var r = JSON.parse(response);
            console.log(r.quote);
        }
    });
}};

---

这在复制线程中也有描述。有关更多信息，请参阅。

由于这是一个AJAX请求，因此请求可能需要一些时间。因此，在尝试

console.log（currentQuote）

之前，可能需要等待几秒钟。在这种情况下，引用对JS属性并不重要，实际上您必须编写

“Accept”：

以使其有效。

$.ajax

是异步的。你的代码不是。就是这样。除了上面关于同步性的评论外，您是否调试过以检查值的响应？此外，您还应该执行以下Ted Hopp的回答，以确保在尝试记录变量之前收到响应。我建议将回调作为参数传递，以在成功时运行。当然，这是可能的；你也可以用承诺。如果有帮助的话，我会在这里添加一些关于回调的宣传。

$(document).ready(function() {
    getQuote().done(function(result) {
        if (result) {
            var r = JSON.parse(response);
            console.log(r.quote);
        }
    });
}};