Wywołanie pętli AJAX nie zwróci wartości do poprawienia pozycji tablicy

Question

Potrzebuję uzyskać zakres stron za pomocą AJAX i umieścić je w tablicy, gdzie ich dane miejsce w tablicy jest równe i pętli for (jest to funkcja buforująca dla stron blogów, a zakres pętli for jest całkowicie zmienny). Robię coś podobnego do następujących:

var bongo = new Array(); 

for (i = 0; i < 10; i++) { 

    jQuery.ajax({ type: "GET", url: 'http://localhost', data: queryString, success: function(request) { bongo[i] = request } }) 

} 

Problem polega na tym, że jeśli dodam async: false do opcji .ajax (co uczyniłoby go ... SJAX?), Co powoduje, że wnioski w zasadzie pauza przeglądarka, idąc wbrew temu, co próbuję zrobić, i w powrocie oddzwonienia zawsze kończy się na 11, podczas gdy ja oczywiście chcę, żeby wylał zwrócone dane do każdego gniazda tablicy od 0 do 10.

próbowałem zastępując Zgodnie z tym:

bongo[i] = jQuery.ajax({ type: "GET", url: 'http://localhost', data: queryString }).responseText 

Ale to nie miało znaczenia.

Answer 1

Musisz Zamknięcie:

var bongo = []; 
for (i = 0; i < 10; i++) 
{ 

    (function(i) 
    { 
     jQuery.ajax(
     { 
      type: "GET", 
      url: "http://localhost", 
      data: queryString, 
      success: function(request) { bongo[i] = request } 
     }); 
    })(i); 
} 

pętle # 1 miejsce, gdzie funkcje inline ogarek ludzi. bongo[i] = result nie jest wywoływany do później. Wartość i w tym czasie jest inna (najprawdopodobniej 11). Jeśli chcesz "pułapkę" lub "przechwycić" bieżącą wartość 10 z i, musisz utworzyć nowy zakres. Jedynym sposobem, aby to zrobić w javascriptie, jest inna funkcja.

Answer 2

Spróbuj:

var bongo = []; 
for (i=0; i<10; i++) { 
    $.get("http://localhost", function(result) { 
    bongo.push(result); 
    } 
} 

ten sposób każdy wynik będzie po prostu się nasunąć na tablicy, rozwiązywanie potrzebę indeksy tablicy są poprawne. Zamówienie nie jest jednak gwarantowane. Jeśli jest to wymagane, będziesz potrzebować innego podejścia.

Istnieje wiele sposobów rozwiązania tego problemu. Oto jeden: tworzenie obiektów dla wywołania zwrotnego w celu zapisania stanu. Oto przykład:

function Callback(array, index, result) { 
    this.array = array; 
    this.index = index; 
    this.result = result; 
    var obj = this; 
    this.func = function() { 
    obj.array[obj.index] = obj.result; 
    }; 
} 

$(function() { 
    var arr = []; 
    for (var i=0; i<4; i++) { 
    var obj = new Callback(arr, i, "result" + i); 
    setTimeout(obj.func, (5-i) * 100); 
    } 
    setTimeout(function() { 
    console.log(arr); 
    }, 500); 
}); 

Więc w twoim przypadku:

function Callback(array, index) { 
    this.array = array; 
    this.index = index; 
    var obj = this; 
    this.callback = function(result) { 
    obj.array[obj.index] = result; 
    }; 
} 

var bongo = []; 
for (i=0; i<10; i++) { 
    var ob = new Callback(bongo, i); 
    $.get("http://localhost", ob.callback); 
} 

Zasadniczo powyżej zapisuje wszystkie dane do obiektu, a zatem każda zwrotna ma dostęp do właściwych informacji.

Należy również pamiętać, że większość przeglądarek ogranicza liczbę jednoczesnych żądań AJAX, zwykle do 2 na hosta.