JQuery ajax вызов в каждом цикле

У меня возникла проблема при использовании функций jquery.each() и .ajax() вместе. Я использую .each() для циклического перехода по 5 элементам и выполняю вызов .ajax() для каждого из них. Моя проблема в том, что я хочу, чтобы цикл продолжался, когда ответ был получен от каждого запроса ajax. В настоящее время все 5 элементов зацикливаются, выполняется 5 запросов ajax, затем возвращается 5 ответов.

Имеет простой пример:

$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

         // I would like the each() loop to pause until this is hit, 
         // and some additional logic can be performed. 

       }
     });

});

Приветствия.

ОТВЕТЫ

Ответ 1

Вы можете использовать параметр async, чтобы сделать каждый запрос синхронным (= halt script выполнение до тех пор, пока каждый запрос не будет завершен)

асинхроннойПо умолчанию все запросы отправляются асинхронно (т.е. По умолчанию это значение равно true). Если вам нужны синхронные запросы, установите для этого параметра значение false. Междоменные запросы и dataType: запросы "jsonp" не поддерживают синхронную работу. Обратите внимание, что синхронные запросы могут временно блокировать браузер, отключая любые действия, пока запрос активен.

но, как уже говорилось в документах, это сильно обескураживает, так как это может заморозить браузер, если запрос зависает или истекает.

Было бы лучше изменить архитектуру вашего кода таким образом, чтобы он мог работать с классическими функциями обратного вызова, если это вообще возможно.

Ответ 2

У Пекки есть правильный ответ. Вам просто нужно отредактировать script, как показано ниже.

$(".element").each(function() {
    var id= $(this).find(('txtId').val();
    $.ajax({
       type: "POST",
       async: false,
       url: "/Handlers/Handler.ashx",
       data: "ID=" + id,
       success: function(xml){

       }
     });

});

Ответ 3

Я рад сказать, что есть способ... но это немного противно.

Если вы уверены, что запрос должен что-то вернуть, вы можете удалить часть "tryIteration".

$(document).ready(function() {

        loop(".buttonsPromotion", 0);

});

function loop(elements, tryIteration) {
//HOW MANY TRIES UNTIL WE STOP CHECKING
if(tryIteration<7){

    $(elements).each(function() {            
        var actuel = $(this);
        $.ajax({
           url: "write your link here",
           data: {},
           dataType: 'json',
           async: true,
           success: function(data){
               //HERE WE KNOW THE AJAX REQUEST WENT OK
               actuel.addClass('AjaxOK');    
           },
           error:function(thrownError){
                console.log(thrownError);
                //WE MAKE ANOTHER EACH ON ALL ELEMENT THAT WENT BAD
                var elemToRetry = actuel.not('AjaxOK');
                loop(elemToRetry, ++tryIteration);
            }
         });

    });
}
}