VAR函數內沒有接收到正確的值 - 的JavaScript

Question

我有這個功能稱爲getQuotes（），並在它的結束，它顯示出CURRENTQUOTE正確的值的console.log（）。

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的的console.log，它沒有接收到正確的值，但仍一個空的字符串被聲明。我究竟做錯了什麼 ？

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

Answer 1

你有兩個單獨的問題。

首先，請從您的文檔準備回調的最後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) 
     } 
    }) 
} 

承諾是處理異步代碼更現代的方式，但同時又是在默認情況下（這可以用填充工具來彌補）少的廣泛支持。承諾超出了這個答案的範圍，但如果你想要更多的信息，那麼我會建議檢查the Promise page on the Mozilla Development Network。

Answer 2

因爲getQuote()使用Ajax調用，所以當您調用getQuote()時，操作將異步進行。這意味着當getQuote()返回時，結果尚不可用。

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 
     } 
    }); 
}; 

然後：：您可以通過從success功能提供一個回調函數作爲參數傳遞給getQuote()和調用該函數解決這個

$(document).ready(function() { 
    getQuote(function(currentQuote, currentAuthor) { 
     console.log(currentQuote); 
    }); 
}); 

這也消除了對全球currentQuote和需要currentAuthor變量。 （雖然你總是可以分配這些回調，如果在其他地方需要的值。）

替代

您可以返回從getQuote一個Promise和修改調用Ajax調用承諾的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); 
     } 
    }); 
}}; 

這也在重複線程中描述。有關更多信息，請參閱the docs for $ajax()。