Ajax призывает для цикла, не будет возвращать значения для исправления положений массива
Я должен получить диапазон страниц с помощью Ajax и поместить их в массив, где их данное место в массиве равно i из для цикла (это - подобная кэшированию функция для страниц блога, и диапазон для цикла совершенно перемен). Я делаю что-то сродни следующему:
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
Но это не имело никакого значения.
2 ответа
Вам нужно закрытие:
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 - использовать другую функцию.
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 на хост.