Question

我正在尝试从api获取数据，但我正在使用的For循环在嵌套的GetJSON调用中返回具有null和未定义值的对象但是当我尝试forEach循环时它工作正常。 任何想法为什么？

var baseUrl = "https://wind-bow.gomix.me/twitch-api/";
var channels = ["ESL_SC2", "FreeCodeCamp", "Test_channel", "brunofin"];

//**First function with forEach. WORKS FINE**
function getDataForEach() {

    channels.forEach(function(channel) {

        $.getJSON(txtUrl('streams', channel), function(json) {
            console.log(json);

            $.getJSON(txtUrl('channels', channel), function(json2) {
                console.log(json2);

            });
        });

    });
}

//**Second function with a normal for loop. The 2nd JSON doesnt return the proper data**

function getDataForLoop() {
        for (i=0;i<channels.length;i++){
            $.getJSON(txtUrl('streams', channels[i]), function(json) {
                console.log(json);

                //THIS 2nd call doesnt returns undefined objects. 
                $.getJSON(txtUrl('channels', channels[i]), function(json2) {
                    console.log(json2);

                });
            });

        });
    }

function txtUrl(prop, chnl) {
    return baseUrl + prop + '/' + chnl + '?callback=?';
}

$(document).ready(function() {
            getData();
});

Answer 1

getJSON是异步的，因此它的回调函数不会立即执行，因此在for循环的情况下，如果使用i，它将生成this error在回调中。

我注意到的另一件事是您使用的全局i也是source of troubles。

如果您使用ECMAScript 6，则可以使用let来声明i：

for(let i = 0; ...)

let是块范围的，因此使用它不会在上面的第一个链接中产生错误。

Answer 2

我认为这与forEach是一个回调函数的事实有关，而不是。因此，在收到数据之前执行。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach

For循环和ForEach循环使用getJSON表现出不同的行为

2 个答案: