Несколько запросов AJAX не вызывают onSuccess, пока все запросы не будут выполнены

Question

Хорошо, я работаю над небольшой фотогалереей, которая будет загружать набор изображений с использованием AJAX. По сути, он будет загружать изображение-заполнитель 'loading.gif', делать AJAX-запрос на создание миниатюрного изображения. Страница PHP генерирует миниатюру и отправляет подтверждение, что изображение было сгенерировано и путь к нему. Мой onSuccess должен затем заменить loading.gif фактическим эскизом.

Проблема: все это работает просто отлично, за исключением того, что оно не начнет помещать миниатюрные изображения, пока не будут выполнены ВСЕ незаконченные запросы. Таким образом, вместо того, чтобы изображения появлялись с интервалом в 1 или 2 секунды, на странице с 20 миниатюрами для генерации я жду 20 секунд, затем, пока идут запросы AJAX, затем начинает отображать миниатюры, даже если некоторые из них уже были готовы.

Вот мой соответствующий код:

function getImageList() {
//Get an XML list of all the images to be displayed.
$.ajax({
 url:"gallery.php",
 type: "POST",
 data:{mode: "getImageList"},   
 success: function(responseText){  
  $(responseText).find('galImg').each(function(){ 

   //create the image divs and images, set properties and get values.
   var imageBox = document.createElement('div');
   var imageElement = document.createElement('img');
   imageBox.setAttribute('class','imageBox');
   imgThumbPath = $(this).find('img_thumb').text();
   imgThumbReady = $(this).find('img_thumb_ready').text();
   imgPath = $(this).find('img_path').text();
   imageElement.setAttribute('id',imgPath);
   imageBox.appendChild(imageElement);
   $('#galleryContainer').append(imageBox);  

   //now load the src of the image
   if (imgThumbReady=='no') {
    imageElement.setAttribute('src',loadingImage);
    $.ajax( {
     url: "gallery.php", 
     type: "POST",
     data: {mode: "generateThumbnail",imgPath:imgPath},   
     success: function(response){  
      if ($(response).find('message').text() == 'Sucess') {
        imageElement.setAttribute('src',$(response).find('galImg').find('img_thumb').text());
       } else {
        alert('Problem Loading Image - '+$(response).find('message').text());
       }
      },
     datatype: "html"
     } );
   } else {
    imageElement.setAttribute('src',imgThumbPath);
   }
  }); 
 },  
 datatype:"html"  
});  

}

Answer 1

Насколько я понимаю ваш код, вы делаете ajax-запрос, чтобы сгенерировать все миниатюры сразу.То, что вы хотите сделать, это, вероятно, сделать какой-то цикл, чтобы сделать AJAX-вызов для генерации ваших изображений одно за другим.И чтобы избежать проблем с ограниченным соединением, вы должны использовать функцию обратного вызова вашего ajax-запроса, чтобы инициировать следующий запрос.

Таким образом, ваша логика кода будет выглядеть примерно так:1005 * Этот код не проверен и неполон, но я думаю, что этого будет достаточно, чтобы указать вам правильное направление.Я думаю, что это самый простой / безопасный способ получить желаемый эффект.Дайте мне знать, если это поможет!