如何使變量在函數外部可訪問？

Question

我正在使用$.getJSON從json文件中獲取數據以獲取字符的ID，然后使用$.getJSON從我之前使用的ID從另一頁中獲取數據。

但是，在控制台中說

https://prod.api.pvp.net/api/lol/eune/v1.2/stats/by-summoner/undefined/summary?api_key=API_KEY_HERE

它應該顯示在那里說的ID unidentified - /by-summoner/undefined/summary

這是我當前的腳本：

var input = "netuetamundis";

var sID;

$(document).ready(function () {
    // get json from this page to get the ID of the input
    $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/" + input + "?api_key=API_KEY_HERE", function (name) {
        obj = name;
        sID = obj.id;
        console.log(sID);
    });
    $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.2/stats/by-summoner/" + sID + "/summary?api_key=API_KEY_HERE", function (stats) {
        console.log(stats);
    });
});

當我用谷歌搜索時，它說要在函數外聲明變量，正如我在代碼中看到的那樣，但是它仍然不起作用。

Answer 1

您的變量聲明及其范圍是正確的。 您面臨的問題是，第一個AJAX請求可能需要一點時間才能完成。 因此，第二個URL將在設置其內容之前用sID的值填充。 您必須記住，AJAX請求通常是異步的，即，在后台獲取數據的同時執行代碼。

您必須嵌套請求：

$.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/"+input+"?api_key=API_KEY_HERE"  , function(name){
  obj = name;
  // sID is only now available!
  sID = obj.id;
  console.log(sID);
});

---

清理您的代碼！

• 將第二個請求放入函數
• 並使其接受sID作為參數，因此您不必再全局聲明它！ （全局變量幾乎總是邪惡的！）
• 刪除sID和obj變量name.id就足夠了，除非您確實需要函數外的其他變量。

 $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/"+input+"?api_key=API_KEY_HERE" , function(name){ // We don't need sID or obj here - name.id is sufficient console.log(name.id); doSecondRequest(name.id); }); /// TODO Choose a better name function doSecondRequest(sID) { $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.2/stats/by-summoner/" + sID + "/summary?api_key=API_KEY_HERE", function(stats){ console.log(stats); }); } 

新年快樂:)

Answer 2

$.getJSON是一個異步請求，這意味着即使請求尚未完成，代碼也將繼續運行。 當第一個請求完成時，您應該觸發第二個請求，這是您在ComFreek的答案中已經看到的選擇之一。

或者，您可以使用jQuery的$ .when / .then（） ，類似於：

var input = "netuetamundis";

var sID;

$(document).ready(function () {
    $.when($.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.1/summoner/by-name/" + input + "?api_key=API_KEY_HERE", function () {
        obj = name;
        sID = obj.id;
        console.log(sID);
    })).then(function () {
        $.getJSON("https://prod.api.pvp.net/api/lol/eune/v1.2/stats/by-summoner/" + sID + "/summary?api_key=API_KEY_HERE", function (stats) {
            console.log(stats);
        });
    });
});

這對於將來的修改將更加開放，並且可以將第一個調用的責任分離出來，以了解第二個調用。

第一次調用可以簡單地完成，並且不必知道您可能要添加的任何其他邏輯，這是屬於自己的事情，而使邏輯的耦合分離。