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);
        });
    })();
}

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

2 个答案: