Javascript 为什么我的循环会冻结？

看起来我的for循环正在将解析的最后一个对象循环到所有字段中

这是我正在使用的实际代码，我为codepen构建了类似的东西，因为我无法从codepen上的实际源代码请求JSON

var championMasteryPHP = "https://api.myjson.com/bins/xked";

$.getJSON(championMasteryPHP, function (json) {
    for (var i = 0; i < json.length; i++) {
        var champID = json[i].championId;
        var champLevel = json[i].championLevel;
        var pointstonextlevel = json[i].championPointsUntilNextLevel;
        var championInfo = "http://example.com/champInfo.php?champid=" + champID;

        $.getJSON(championInfo, function (json2) {
            var champName = json2.name;
            var champTitle = json2.title;
            $('#champ').append("<li>ID: " + champID + " | Name: " + champName + " | Level: " + champLevel + " | Points to Next Level: " + pointstonextlevel + "</li>");
        });
    };
});

var championMasteryPHP=”https://api.myjson.com/bins/xked";
$.getJSON（championMasteryPHP，函数（json）{
for（var i=0；iID:+champID+”；Name:+champName+”；Level:+champLevel+”；指向下一级：“+pointstonextlevel+””；
});
};
});

长话短说，我正在努力实现的目标是这样的

但出于某种原因，这是我得到的

正确的名称，但其他变量是列表中的最后一个变量

有更好的方法吗？我做错什么了吗

---

谢谢。

您正在javascript for循环中使用异步进程

您可以修改以使用自执行函数，这样它就可以工作了

var championMastery = "https://api.myjson.com/bins/xked";
$.getJSON(championMastery, function (json) {
for (var i = 0; i < json.length; i++) {

    (function(obj){
        var champID = obj.championId;
        var champLevel = obj.championLevel;
        var pointstonextlevel = obj.championPointsUntilNextLevel;
        var championInfo = "http://example.com/champInfo.php?champid=" + champID;

            $.getJSON(championInfo, function (json2) {
                var champName = json2.name;
                var champTitle = json2.title;
                $('#champ').append("<li>ID: "+champID+" | Name: " +champName+ " | Level: " +champLevel+ " | Points to Next Level: " +pointstonextlevel+ "</li>");
            });
    })(json[i])
};
});

var championMastery=”https://api.myjson.com/bins/xked";
$.getJSON（championMastery，函数（json）{
for（var i=0；iID:+champID+”；Name:+champName+”；Level:+champLevel+”；指向下一级：“+pointstonextlevel+””；
});
})（json[i]）
};
});

您正在javascript for循环中使用异步进程

您可以修改以使用自执行函数，这样它就可以工作了

var championMastery = "https://api.myjson.com/bins/xked";
$.getJSON(championMastery, function (json) {
for (var i = 0; i < json.length; i++) {

    (function(obj){
        var champID = obj.championId;
        var champLevel = obj.championLevel;
        var pointstonextlevel = obj.championPointsUntilNextLevel;
        var championInfo = "http://example.com/champInfo.php?champid=" + champID;

            $.getJSON(championInfo, function (json2) {
                var champName = json2.name;
                var champTitle = json2.title;
                $('#champ').append("<li>ID: "+champID+" | Name: " +champName+ " | Level: " +champLevel+ " | Points to Next Level: " +pointstonextlevel+ "</li>");
            });
    })(json[i])
};
});

var championMastery=”https://api.myjson.com/bins/xked";
$.getJSON（championMastery，函数（json）{
for（var i=0；iID:+champID+”；Name:+champName+”；Level:+champLevel+”；指向下一级：“+pointstonextlevel+””；
});
})（json[i]）
};
});

我最近看到的一篇非常好的文章。详细介绍了。这是使用javascript、Jquery进行编码的必备知识。对上述问题有解释的部分是寻找臭名昭著的循环问题下的主题

现在来谈谈问题。您的代码实际上应该是

    $.getJSON(championInfo, function (json2) {
            (function(){
              var champName = json2.name;
              var champTitle = json2.title;
              $('#champ').append("<li>ID: "+champID+" | Name: " +champName+ " | Level: " +champLevel+ " | Points to Next Level: " +pointstonextlevel+ "</li>");            
            })()
            });

现在通过执行以下操作调用/执行函数

alert1();

你会得到一个警告说“我是一个！！”

现在将其添加到控制台

function alert1(){ alert("I am one, But overritten!!");}

---

然后试着打电话给它。输出将是“我是一个，但是被重写了！！”，所以函数实际上被重写了，这就是for循环中发生的事情。最后一个函数可用于所有回调

我最近看到的一篇非常好的文章。详细介绍了。这是使用javascript、Jquery进行编码的必备知识。对上述问题有解释的部分是寻找臭名昭著的循环问题下的主题

现在来谈谈问题。您的代码实际上应该是

    $.getJSON(championInfo, function (json2) {
            (function(){
              var champName = json2.name;
              var champTitle = json2.title;
              $('#champ').append("<li>ID: "+champID+" | Name: " +champName+ " | Level: " +champLevel+ " | Points to Next Level: " +pointstonextlevel+ "</li>");            
            })()
            });

现在通过执行以下操作调用/执行函数

alert1();

你会得到一个警告说“我是一个！！”

现在将其添加到控制台

function alert1(){ alert("I am one, But overritten!!");}

---

然后试着打电话给它。输出将是“我是一个，但是被重写了！！”，所以函数实际上被重写了，这就是for循环中发生的事情。最后一个函数可用于所有回调

我很确定问题在于for循环中有一个异步函数，当调用异步函数时，它们都引用相同的索引值。可能重复这是一个臭名昭著的循环问题。让我发布我的答案吧，我认为在一个循环中发出多个AJAX（JSON）请求不是一个好的做法。有没有一种方法可以在服务器端构建复杂对象（包含两个JSON的数据），并通过一个请求获得它？我很确定问题在于for循环中有一个异步函数，当调用异步函数时，它们都引用相同的索引值。可能重复这是一个臭名昭著的循环问题。让我发布我的答案吧，我认为在一个循环中发出多个AJAX（JSON）请求不是一个好的做法。有没有一种方法可以在服务器端构建复杂对象（包含两个JSON的数据），并通过一个请求获得它？太好了！这似乎解决了问题。快速提问，你知道为什么现在页面上显示append时会出现问题吗<代码>$。getJSON是异步函数，因此

$（'#champ'）。append

将取决于服务器的响应。您还可以查看库以缓解问题！这似乎解决了问题。快速提问，你知道为什么现在页面上显示append时会出现问题吗<代码>$。getJSON是异步函数，因此