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

Question

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

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

Answer 1

Вы можете использовать опцию async для этого, чтобы сделать каждый запрос синхронным (= остановить выполнение скрипта до завершения каждого запроса):

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

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

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

Answer 2

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

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

       }
     });

});

Answer 3

Вы можете использовать функцию отсрочки и обещания jquery для проверки успешности асинхронного вызова или нет.http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/

Answer 4

Я рад сообщить, что есть способ ... но он немного противный.

Если вы уверены, что запрос должен что-то вернуть, вы можете удалить часть "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);
            }
         });

    });
}
}