Ajax ожидает успеха перед следующей итерацией в цикле .each

У меня есть вызов ajax внутри цикла .each, завернутого в функцию setInterval. Это обрабатывает обновление многих div на панели инструментов всего несколькими строками кода на странице html.

Я беспокоюсь о задержке сервера по сравнению со скоростью на стороне клиента. Что произойдет, если сервер не ответит данными до того, как цикл перейдет к следующей итерации?

Итак, мой вопрос: можно ли приостановить цикл до тех пор, пока успех не будет выполнен?

Звонок Аякса:

setInterval(function() {
$(".ajax_update").each(function(){
    $.ajax({
            type: "POST",
            dataType: "json",
            url: "ajax/automated_update/confirmed_appointments.php",
            data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&"+$(this).data('stored'), // serializes the form's elements.
            success: function(data)
            {
                $(data[0]).html(data[1]);
            }
        });
});
}, 5000); //5 seconds*
</script>

Я просмотрел .ajaxComplete(), но не вижу, как применить это в качестве решения.

Я также посмотрел на превращение цикла во что-то, что вызывает себя так:

function doLoop() {
   if (i >= options.length) {
      return;
   }
   $.ajax({
   success: function(data) {
      i++;
      doLoop();
   }
   });
}

Но не будет ли это мешать .each? Я не понимаю, как это будет хорошо работать с .each и зацикливанием на основе моего класса div.

Я просто не могу понять это! Любая помощь будет оценена по достоинству.

Мне удалось получить .when при работе с вызовом ajax, но я не понимаю, как заставить .when делать то, что мне нужно (остановить цикл, пока вызов ajax не будет выполнен).

$(".ajax_update").each(function(){
    $.ajax({
            type: "POST",
            dataType: "json",
            url: "ajax/automated_update/confirmed_appointments.php",
            data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&"+$(this).data('stored'), // serializes the form's elements.
            success: function(data)
            {
                $(data[0]).html(data[1]);

            }
        });
 $.when( $.ajax() ).done(function() {
    alert("Finished it");
  });       

});

ajax each
person Jason    schedule 11.03.2015    source источник
comment
посмотрите на методы jquery ajax promise   -  person Mark Schultheiss    schedule 11.03.2015
comment
пример: api.jquery.com/jquery.when   -  person Mark Schultheiss    schedule 11.03.2015
comment
Спасибо за ссылки. Я добавил код внизу моего вопроса с .when внутри функции .each, но я не понимаю, как заставить .when делать то, что мне нужно (остановить цикл, пока не будет выполнен вызов ajax). Можете ли вы помочь мне понять, куда идти отсюда?   -  person Jason    schedule 11.03.2015

Ответы (1)


arrow_upward
1
arrow_downward

Немного подумав над вашим вопросом, возможно, хорошим решением было бы создать событие, которое запускало бы новый набор обновлений с минимальным временем между обновлениями панели управления. Это гарантирует, что все ваши обновления обрабатываются, что мы выжидаем минимальное время между обновлениями, а затем снова запускаем цикл обновления. Таким образом, если вы ДЕЙСТВИТЕЛЬНО сталкиваетесь с какими-либо задержанными ответами ajax, вы не пытаетесь использовать другой, пока предыдущий не будет завершен.

Я не полностью тестировал этот код, но он должен делать то, что я описываю:

//create a dashboard object to handle the update deferred
var dashboard = {
    update: function (myquery) {
        var dfr = $.Deferred();
        $.ajax({
            type: "POST",
            dataType: "json",
            url: "ajax/automated_update/confirmed_appointments.php",
            data: "clinic_id=<? echo $clinic_id ?>&tomorrow=<? echo $tomorrow ?>&" + myquery,
            success: dfr.resolve
        });
        return dfr.promise();
    }
};
//create a simple deferred wait timer
$.wait = function (time) {
    return $.Deferred(function (dfd) {
        setTimeout(dfd.resolve, time);
    });
};
// use map instead of your .each to better manage the deferreds
var mydeferred = $(".ajax_update").map(function (i, elem) {
    return dashboard.update($(this).data('stored')).then(function (data, textStatus, jqXHR) {
        $(data[0]).html(data[1]);
    });
});
//where I hang my dashboardupdate event on and then trigger it
var mydiv = $('#mydiv');
var minimumDashboardUpdate = 5000;
$('#mydiv').on('dashboardupdate', function () {
    $.when.apply($, mydeferred.get())
        .then(function () {
        $.when($.wait(minimumDashboardUpdate)).then(function () {
            mydiv.trigger('dashboardupdate');
        });
    });
});
mydiv.trigger('dashboardupdate');
person Mark Schultheiss    schedule 11.03.2015
comment
Некоторое прекрасное кодирование, мой друг. Я добавлю галочку к этому после того, как попробую, но спасибо, и впечатляет. Повел меня в направлении, в котором я бы сам не пошел. - person Jason; 11.03.2015