.getJSON 中的变量显示错误 [重复]答案

【问题标题】：for variable within .getJSON displayed wrong [duplicate].getJSON 中的变量显示错误 [重复]
【发布时间】：2016-12-21 01:19:03
【问题描述】：

我有以下代码（javascript/jQuery）

$(function(){
    for(var i=0;i<3;i++){

        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
            console.log(i);
            console.log(data);
        });
    }
});

控制台日志：

3
Object { stream: Object, _links: Object }
3
Object { stream: Object, _links: Object }
3
Object { stream: Object, _links: Object }

不是吗，console.log(i); 应该在第一个循环中记录 0，在第二个循环中记录 1，在第三个循环中记录 2？但不知何故，它总是返回 3 :(

【问题讨论】：

标签： javascript jquery getjson console.log

【解决方案1】：

试试这个

$(function(){
    for(var i=0;i<3;i++){
        (function (index) {
            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
                console.log(index);
                console.log(data);
            });
        })(i)
    }
});

【讨论】：

发生这种情况是因为 for 循环在 AJAX 被触发之前完全执行并且状态在变量 i 的代码中维护。在 for 循环执行期间使用闭包和匿名函数来维护 i 的状态。
谢谢！即使我不明白你做了什么，它也能完美运行。这个过程如何调用；有这方面的文献吗？
@orly 阅读您的问题下 cmets 中的第一个链接。

【解决方案2】：

你能在 $.getJson 成功中显示结果吗？

 $(function(){
            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
              for(var i=0;i<3;i++){
                console.log(i);
                console.log(data[i]);
               }
            });
        });

您的 i=3 因为您的循环不等待 $.getJson 成功。它正在工作并立即增加值。

【讨论】：

【解决方案3】：

试试这个

    $.ajaxSetup({
        async: false
    });

    $(function(){
    for(var i=0;i<3;i++){
        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data){
            console.log(i);
            console.log(data);
        });
    }
});

&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;

【讨论】：

他可以“试试这个”，但他永远不应该使用它。没有必要使这些 Ajax 请求同步（至少在这种情况下），它可能会在等待响应时冻结网页。

【解决方案4】：

如果您使用的是 ecma6，那么您可以使用 let 来避免关闭问题。它创建块范围。

$(function() {
    for (let i = 0; i < 3; i++) {

        $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
            console.log(i);
            console.log(data);
        });
    }
});

否则，您可以使用IIFE

$(function() {

    for (var i = 0; i < 3; i++) {

        (function(i) {

            $.getJSON("https://api.twitch.tv/kraken/streams/esl_csgo", function(data) {
                console.log(i);
                console.log(data);
            });

        })(i)

    }
});

类似，你可以使用bind。

【讨论】：