AJAX call in for loop не возвращает значения для коррекции позиций в массиве
Мне нужно получить ряд страниц с помощью AJAX и поместить их в массив, где их заданное место в массиве равно i
цикла for (это кэширующая функция для страниц блога и диапазон цикла for полностью переменный). Я делаю что-то похожее на следующее:
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 } })
}
Проблема заключается в том, что если я не добавлю async: false
к параметрам .ajax(что бы сделать это... SJAX?), что заставляет запросы в основном приостанавливать браузер, что противоречит тому, что я пытаюсь сделать, я в обратном вызове успеха всегда будет составлять 11, тогда как я, конечно, хочу, чтобы он вылил возвращаемые данные в каждый слот массива от 0 до 10.
Я попытался заменить строку следующим:
bongo[i] = jQuery.ajax({ type: "GET", url: 'http://localhost', data: queryString }).responseText
Но это не имело значения.
Ответы
Ответ 1
Вам нужно закрыть:
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);
}
Циклы - это №1, где встроенные функции обрезают людей. bongo[i] = result
не вызывается дольше. Значение i
в это время отличается (скорее всего, 11). Если вы хотите "захватить" или "захватить" текущее значение i
, вам нужно создать новую область. Единственный способ сделать это в javascript - это еще одна функция.
Ответ 2
Try:
var bongo = [];
for (i=0; i<10; i++) {
$.get("http://localhost", function(result) {
bongo.push(result);
}
}
Таким образом, каждый результат будет просто вдаваться в массив, решая необходимость правильности индексов массива. Заказ, однако, не гарантируется. Если это требование, вам понадобится другой подход.
Существует несколько способов решения этой проблемы. Вот один: создать объекты для вашего обратного вызова для сохранения состояния. Вот пример:
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);
});
Итак, в вашем случае:
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);
}
В основном вышеперечисленное сохраняет все данные в объекте, и поэтому каждый обратный вызов имеет доступ к необходимой информации.
Также учтите, что большинство браузеров ограничивают количество одновременных запросов AJAX, обычно до 2 на хост.