AJAX - Дождитесь ответа перед тем, как сделать следующий вызов AJAX

Question

Я сделал функцию, которая проходит через каждый тег div с классом = "health_report", для каждого div он вызывает вызов AJAX. Единственная проблема заключается в том, что он делает как 50 вызовов AJAX (при условии, что у меня есть 50 тегов DIV). Это было бы хорошо, но для моих целей мне нужно, чтобы он дождался завершения первого вызова AJAX (функция успеха активирована), переместившись на следующий тег DIV. Heres код:

$('.health_report').each(function(i, obj) { 
    // FIRST AJAX CALL 
    generateHealthReport(); 
}); 

    function generateHealthReport(fileID,filter,slug,reportID,importance,reputation) { 

     $.ajax({ 
      type: "POST", 
      url: ajaxurl, 
      data: { 
       "action": 'generateHealthReport' 
      }, 
      dataType: "html", 
      success: function (returnData) { 
       // do something 

      } 
     }); 
    } 

Так что я попробовал, который должен работать добавлял таймер цикла

Как я могу сделать так, чтобы петля (с помощью JQuery называется времени http://creativecouple.github.io/jquery-timing/)

так код стал этим:

$('.health_report').each($).wait(3000,function(i, obj) { 
    // FIRST AJAX CALL 
    generateHealthReport(); 
}); 

петли Теперь пауз в течение 3 секунд между итерацией, которая дает в первый раз AJAX вызова, чтобы завершить до цикла перемещается в п xt тег DIV. Это приводит к тому, что вызовы AJAX происходят так, как они мне нужны, но по какой-то причине его глючный, иногда ответ HTML, который возвращается, является лишь частью HTML, который должен быть возвращен. Есть ли другой способ сделать это? Как сделать паузу цикла до тех пор, пока не будет завершен вызов AJAX?

Answer 1

Вы можете использовать ajaxComplete или опцию полного от ajax:

$.ajax({ 
    type: "POST", 
    url: ajaxurl, 
    data: { 
     "action": 'generateHealthReport' 
    }, 
    dataType: "html", 
    success: function (returnData) { 
     // do something 

    } 
    complete: function() { 
     // This is called after completion of Ajax. 
     // nextAjax(); 
    } 
});