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

看起來這里的問題是您期望返回的值會在下一次AJAX調用之前及時附加到rend字符串中。 這不會發生，因為進行調用是一個同步過程，但是獲取返回值是異步的。 代替：

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

Answer 2

不知道這是問題所在，但對於POST來說不是這樣嗎？

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

（不同之處在於“數據”是對象而不是字符串）

Answer 3

當執行函數fill_div時，將初始化

var rend = "";

當構建POST請求時，

'data':"rendered="+rend

撕裂值將為空

您可以仔細檢查變量名稱嗎？

:)