Отложенный цикл jQuery

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

function ajax_function() {
  return $.ajax({
    url: "submit.php",
    type: "POST",
    dataType: "json",
    data: form_data,
    cache: false
  })
}

var deferreds = $('input:checkbox:checked.checkprint').map(function(i, elem) {
  $.when(ajax_function()).then(function(data) {
    console.log('single call completed');
    return data;
  });
});

$.when.apply($, deferreds.get()).done(function() {
  console.log('all calls completed');
});

loops jquery ajax deferred
person TJ Smith    schedule 21.02.2013    source источник
comment
IMO, это плохая идея отправлять данные при каждом щелчке флажка, вы можете поместить кнопку, когда пользователь нажимает кнопку, считывает все эти значения и отправляет их на сервер.   -  person Ravi Gadag    schedule 21.02.2013

Ответы (2)


arrow_upward
1
arrow_downward

Вы можете сделать ваши вызовы ajax синхронными.

function ajax_function() {
  return $.ajax({
    url: "submit.php",
    type: "POST",
    dataType: "json",
    data: form_data,
    cache: false,
    async:false
  })
}

вариант 2:

var totalnumber = $('input:checkbox:checked.checkprint').length;
var counter   = { t: 0 };
var deferreds = $('input:checkbox:checked.checkprint').map(function(i, elem) {
  $.when(ajax_function(totalnumber,counter)).then(function(data) {
    console.log('single call completed');
    return data;
  });
});

function ajax_function(totalnumber,counter) {
  return $.ajax({
    url: "submit.php",
    type: "POST",
    dataType: "json",
    data: form_data,
    cache: false,

  }).done(function( html ) {
    counter.t++;
    if (counter.t == totalnumber) {
         console.log('all calls completed');
    }
  });
}

Почему counter.t, потому что объекты передаются как ссылки и нам нужно изменить значение counter.t.

person Victor    schedule 21.02.2013
comment
Это работает, но я бы хотел, чтобы все они сработали одновременно. Когда я меняю на async: false, он ждет завершения каждого вызова, прежде чем двигаться дальше. Я хочу, чтобы все они начали вместе, и как только все они завершили, чтобы продолжить. - person TJ Smith; 21.02.2013

arrow_upward
0
arrow_downward

Я думаю, что добился того, что пытался сделать, используя ajaxStop (http://api.jquery.com/ajaxStop/< /а>)

$(document).delegate('#submit_all', 'click', function(e) {
  $('input:checkbox:checked.checkprint').each(function() {
    ajax_function();
  });
  $("#submit_all").one("ajaxStop", function() {
    console.log('all calls completed');
  });
});
person TJ Smith    schedule 21.02.2013