AJAX/getJSON 中的 jQuery 范围或竞争条件

Question

我有一段 jQuery 代码可以快速连续调用多个 getJSON()：

var table = $("table#output");
for (var i in items) {
    var thisItem = items[i];
    $.getJSON("myService", { "itemID": thisItem }, function(json) {
        var str = "<tr>";
        str += "<td>" + thisItem + "</td>";
        str += "<td>" + json.someMember + "</td>";
        str += "</tr>";
        table.append(str);
    });
}

当我在一台滞后的服务器上运行此程序时，该表会填充预期的 json.someMember 值（它们无序到达：我不介意），但 thisItem 列填充了不可预知的混合物来自各种迭代的值。

我假设这与范围和时间有关 - 回调函数正在从更广泛的范围读取 thisItem？我对吗？如何防止这种情况发生？

我目前的解决方法是让 JSON 服务返回其输入的副本 - 至少可以说是不令人满意的。

Answer 1

由于循环，这似乎是一个范围问题。试试这个：

var table = $("table#output");
for (var i in items) {
    var thisItem = items[i];
    $.getJSON("myService", { "itemID": thisItem }, (function(thisItem) {
        return function(json) {
            var str = "<tr>";
            str += "<td>" + thisItem + "</td>";
            str += "<td>" + json.someMember + "</td>";
            str += "</tr>";
            table.append(str);
        }
    })(thisItem));
}

编辑：我所做的只是将thisItem 作用于$.getJSON 回调。

Answer 2

Javascript 不使用块作为范围。范围仅基于函数。

如果你想要一个新的作用域，你必须声明一个新的内部函数并立即运行它，这是在 Javascript 中创建新作用域的唯一方法。

var table = $("table#output");
for( var i in items ) 
{
    (function(){
        var thisItem = items[i];
        $.getJSON("myService", { "itemID": thisItem }, function(json) 
        {
            var str = "<tr>";
            str += "<td>" + thisItem + "</td>";
            str += "<td>" + json.someMember + "</td>";
            str += "</tr>";
            table.append(str);
        });
    })();
}