javascript - jQuery .ajax() 回调范围困惑

Question

我在循环中发出请求，试图累积每次返回的对象的 ID 并发送到后续请求，这样它们就不会被第二次返回。但是，累加器变量(显然)在 .ajax() 成功回调之外，当我通过调用的数据对象传递它时它是空的。

function fill_div(id, count) {
    var rend = "";
    var filler = $('#'+id);
    for(i = 0; i < count; i++) {
        $.ajax({'type':'POST',
                'url':'/ads/render/',
                'dataType':'json',
                'data':"rendered="+rend}).success(function(data){
                    filler.append('<div id="' + data.adid + '"></div>');
                    rend+=data.mid.toString()+",";
                    _fill_ad(data);
                });
    }
}

当我在 chrome 的检查器中查看请求时，变量在发布数据中，但没有值。我觉得我在范围界定方面遇到了麻烦。

Answer 1

看起来这里的问题是您希望返回的值及时附加到 rend 字符串以供下一次 AJAX 调用。这不会发生，因为发出调用是一个同步过程，但获取返回值是异步的。而不是:

AJAX Post 1 (rend='')
rend += 'id1,'
AJAX Post 2 (rend='id1,')
rend += 'id2,'
AJAX Post 3 (rend='id1,id2,')
// etc

序列最像这样:

AJAX Post 1 (rend='')
AJAX Post 2 (rend='')
AJAX Post 3 (rend='')
// etc
// ... data is returned, not necessarily in order
rend += 'id2,'
rend += 'id1,'
rend += 'id3,'
// etc

为了让每个后续的 AJAX 调用都知道先前从服务器返回的内容，您必须链接调用，以便在上一个调用完成之前不会进行下一个 AJAX 调用。你可以用递归来做到这一点，像这样:

function fill_div(id, count) {
    var rend = "";
    var filler = $('#'+id);
    // inner function for recursion
    function doAjaxCall(i) {
        $.ajax({'type':'POST',
            'url':'/ads/render/',
            'dataType':'json',
            'data':{'rendered': rend})
            .success(function(data){
                filler.append('<div id="' + data.adid + '"></div>');
                rend+=data.mid.toString()+",";
                _fill_ad(data);
                // now send the next call
                if (i < count) {
                    doAjaxCall(i+1);
                }
            });
    }
    // kick off the series
    doAjaxCall(0);
}