getJSON 变量返回未定义答案

【问题标题】：getJSON variable returns undefinedgetJSON 变量返回未定义
【发布时间】：2016-07-22 23:33:26
【问题描述】：

我不知道为什么我的 getJSON 中的“streamName[i]”返回“未定义”。它里面的所有东西都返回正确的值，但只有streamName一个返回未定义的

var streamName = ['LCK1', 'ryan_clark', 'syndicate', 'riotgames', 'esl_csgo', 'Nightblue3', 'summit1g', 'imaqtpie', 'sodapoppin', 'captainsparklez'];
var nullLogo = "https://dummyimage.com/50x50/ecf0e7/5c5457.jpg&text=0x3F";
var name;

for (var i = 0; i < streamName.length; i++) {
    var url = 'https://api.twitch.tv/kraken/streams/' + streamName[i] + '?callback=?';

    $.getJSON(url, function(data) {
        console.log(name);

        if (data.stream == null) {
            $('.streamersList').append('<div> <div class="logo"> <img src=' + nullLogo + '></div> <div class="nameStreamer">' + streamName[i] + '</div> <div class="state"> Offline </div></div>');
        } else {
            $('.streamersList').append('<div> <div class="logo"> <img src=' + data.stream.channel.logo + '></div> <div class="nameStreamer">' + streamName[i] + '</div> <div class="state">' + data.stream.channel.game + ' </div></div>');
        }

    });
}

【问题讨论】：

标签： javascript jquery

【解决方案1】：

因为$.getJSON 是一个异步函数，所以当回调运行时，i 将完成循环。由于当i 大于或等于streamName 的长度时循环中断，所以i 将尝试访问streamName 中超过数组末尾的元素，即undefined。

i 的原因是，在这种情况下，回调的每个实例中都有 10 个，这是因为 JavaScript 中作用域的工作方式。就代码所知，i 与streamName、nullLogo 和name 一起声明在函数的顶部。在循环中迭代时，i 的值发生了更改，并且该更改在函数内部的任何地方都可见，包括尚未运行的回调内部。当它们运行时，i 将是 10，因为它到达了循环的末尾，这就是回调将使用的值。

确保在$.getJSON 函数中获得正确的i 值的一种方法是将i 作为参数传递给立即调用的函数。这将有效地将i 的当前值绑定到参数index，因此使用index 从数组中取出一个元素将具有基于循环迭代的正确值.

for (var i = 0; i < streamName.length; i++) {
    // note how i can be used here because this is synchronous, aka happening right now
    var url = 'https://api.twitch.tv/kraken/streams/' + streamName[i] + '?callback=?';

    (function(index) {
        $.getJSON(url, function(data) {
            // this is asynchronous (happens in the future), so i will have a different
            // value by the time it is called, but index will have the correct value
            console.log(name);
            if (data.stream == null) {
                $('.streamersList').append('<div> <div class="logo"> <img src='
                    + nullLogo
                    + '></div> <div class="nameStreamer">'
                    + streamName[index]
                    + '</div> <div class="state"> Offline </div></div>');
            } else {
                $('.streamersList').append('<div> <div class="logo"> <img src='
                    + data.stream.channel.logo
                    + '></div> <div class="nameStreamer">'
                    + streamName[index]
                    + '</div> <div class="state">'
                    + data.stream.channel.game
                    + ' </div></div>');
            }
        });
    })(i);
}

【讨论】：

谢谢！不知道这个！

【解决方案2】：

$.getJSON 是一个异步函数。因此，当函数回调发生时，循环已经循环通过了 i 的所有迭代。所以我在你的情况下的价值是 streamName.lenghth 这使得 streamName[i] 未定义

我会避免在这样的回调中使用索引。您需要使用的是立即调用的函数 express(IIFE) 查看其他 stackoverflow 帖子。 How to access index variable in a jquery getJson call ($.getJson) during a loop?

【讨论】：