Использование jQuery для вызова функции PHP для множества элементов по одному, а не сразу

Question

Допустим, я использую $ .get для получения массива идентификаторов пользователей.
Давайте теперь предположим, что я хочу просмотреть все эти идентификаторы пользователей (пример: [13, 14, 15, 23, 34, 56]) и получить определенную информацию о каждом из них, затем заполнить текстовое поле на основе результатов и перейти к следующему.

$.each(array_of_users, function(i, id) {
    $.get("/somefunction", {id}, function(data){
         appendToField(data);
    }, "json");
});

Как бы я сделал так, чтобы все эти циклы не происходили приодин раз и затем ждать результата вместе асинхронно, как они делают сейчас, но один за другим?То есть я хочу, чтобы цикл не переходил к следующему элементу до тех пор, пока запросы ajax не скажут, что это нормально.

Каков наилучший способ подойти к этому без использования задержек или тайм-аутов, но реальных ответов отфункция, выполняющая обработку?

Приветствия

Редактировать: Стильное представление внешнего вида "командной строки" важно для меня, поэтому я хотел бы, чтобы textarea получал сообщения по одномуодин как записи обрабатываются.Я знаю, что мог бы сделать это через PHP намного проще и без хлопот или потенциальных разрывов JS, но я хотел бы сделать это стильно через JS для имитации этого «консольного» вида, как в:

10: 01: 33: Пользователь 13 обработан: Дата истечения срока действия изменена на 13.02.2011.
10:01:34: Пользователь 16 не обработан: Целевая защита от изменений системы ..
10:01:34: Пользователь 17 не обработан:Целевая защита от системных изменений ..
10:01:35: Пользователь 23 обработан: Дата истечения срока действия изменена на 19.02.2011.
и т. Д.

Edit2:

Я простонашел этот замечательный маленький плагин, который позволяет мне делать именно то, что я хочу.Однако я не могу найти средства, чтобы остановить очередь после ее запуска.Это теперь новая проблема.Любые идеи, кто-нибудь?Перезагрузка страницы, естественно, работает, но я бы хотел, чтобы она застыла на месте, как только я нажму кнопку «Стоп», чтобы пользователь мог просто скопировать весь отчет прямо из текстового поля.

Answer 1

В основном используйте первый .get(), чтобы получить список значений (array_of_users). Используя этот список, передайте их «рабочей» функции, которая берет первый элемент, работает с ним, а затем отправляет оставшиеся элементы, чтобы сделать то же самое. Продолжайте, пока не останется больше записей для обработки. (думайте об этом как о очереди FIFO)

$.get('/loadfunction',{},function(data){
  getinfo(data.array_of_users);
},'json');

function getInfo(array_of_users){
  if (array_of_users.length == 0)
    return;

  $.get('/somefunction',{array_of_users[0]},function(data){
    // handle the result of this id
    appendToField(data);

    // move on through the list, dropping the first element
    getInfo(array_of_users.slice(1));
  });
}

РЕДАКТИРОВАТЬ: используемые переменные / GET пути, аналогичные тем, которые вы упоминали в своем первоначальном вопросе.

Answer 2

Вместо того, чтобы возвращать номера массивов, а затем повторно запрашивать сервер для получения дополнительной информации для каждого идентификатора, почему бы вам не вернуть массив объектов? Например:

[
  {"id":1, "uname":"jsmith", "admin":true},
  {"id":2, "uname":"jdoe", "admin":false}
]

Это просто сделать с помощью функции PHP json_encode . Когда ваш JavaScript получает массив объектов, он будет иметь все данные, необходимые для каждой итерации цикла.

Answer 3

Я согласен с jsummers ... вероятно, было бы лучше вытащить всю информацию сразу, а не отправлять отдельные запросы. С этим сказал, что вы можете делать, что вы хотите, используя $.ajax с async: false:

$.each(array_of_users, function(i, id) {
    $.ajax({
      url: "/somefunction",
      data: {id: id},
      dataType: 'json',
      type: 'get',
      async: false,
      success: function(data){
         appendToField(data);
      }
    });
});

Answer 4

ИМХО, вы должны обработать все в бэкэнде, а затем вернуть JSON следующим образом:

    id: 2,
    user: 'mary',
    msg: 'Changed expiry date to 19.02.2011.'
},
{
    id: 3,
    user: 'marlon',
    msg: 'Something went wrong..'
},

• DEMO 2: http://jsbin.com/okudi4/4

ПриветSwader.

Исходя из того, что у меня та же точка зрения на jsummers

, вот тот эффект, который вы ищете.

• DEMO:http://jsbin.com/okudi4

$(function() {
    var results = ['brown', 'fox', 'jump', 'hover', 'the', 'lazy', 'dog'];
    $.each(results,function(i, item) {
        $('<li class="resultlistitem">').html(item).hide()
          .appendTo('#resultList').delay(i + '000').fadeIn(200);
    });
});