javascript - jQuery getJson() 的非常奇怪的行为不会在循环中更改值

Question

好吧，这个问题很奇怪。我正在使用 getJSON() 接收项目列表。对于每个返回的项目，我再次使用 getJSON() 执行查找。在第二次查找返回时，我尝试将 for 循环范围内的变量附加到 DOM，但输出是相同的。奇怪的是，当我在第二个 getJSON() 之前发出变量的 alert() 时，变量会像它应该的那样改变。

这是一个错误吗？好像 getJSON 正在缓存一些东西......

$.getJSON(
"http://someurl", 
    function(data) {
        var items = data.items;

        for(i=0; i<items.length; i++) {
            var i = items[i];
            //when doing an alert of 'i' here, it changes...
            $.getJSON(
                "http://anotherurl",
                    function(r) {
                        $("#feed").append(i.some_property); 
                        //appended item should be different upon each loop
                        //but ends up appending the same thing every time!!
                    }
            )
        }
    }
)

Answer 1

Ajax 是异步的。

在内部 getJSON 发出的第一个 HTTP 请求返回之前，您可能设法一直循环通过外部循环，因此 i 是内部回调运行之前的最后一个值第一次。

当您添加一个 alert 时，循环执行将暂停，直到您单击 OK 按钮，这为 HTTP 请求提供了响应时间。

您需要在不同的范围内创建一个新的 i(或其他变量)。

for(var i=0; i<items.length; i++) {
     // IMPORTANT: Don't forget to use var. 
     // DO NOT use globals without a very good reason
     // Oh, i is a var but you use the keyword on the *second* time you use it
     // Don't do that, it's confusing!
     do_the_inside_thing(items[i]);
}

function do_the_inside_thing(foo) {
    // A new function is a new scope
        $.getJSON(
            "http://anotherurl",
                function(r) {
                    $("#feed").append(foo.some_property); 
                }
        );
}