For 循环和 ForEach 循环在 getJSON 中表现出不同的行为

Question

我正在尝试从 api 获取数据，但我使用的 For 循环在嵌套的 GetJSON 调用中返回具有空值和未定义值的对象，但是当我尝试 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循环的情况下，如果你使用[=13，它会产生this error =] 在回调中。

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

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

for(let i = 0; ...)

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

Answer 2

我认为这与 forEach 是回调函数而 for 不是的事实有关。所以 for 是在接收到数据之前执行的。

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

For 循环和 ForEach 循环在 getJSON 中表现出不同的行为

For loop and ForEach loop exhibit different behaviors with getJSON

javascript

ajax

foreach

jquery

getjson