在完成所有請求之前，多個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請求的回調函數來啓動下一個請求。

所以，你的代碼邏輯會更喜歡這樣的：

function loadImage(imagePath){ 
    $.ajax({ 
    url: "gallery.php", 
    type: "POST", 
    data: {mode: "generateThumbnail",imgPath:imgPath}, 
    success: function(response){ 
     // Your code to display this new thumnail goes here 
     imagePath(nextImage); 
    } 
}; 

此代碼是未經測試和不完整的，但我認爲這應該足以爲你指明正確的方向。我認爲這是獲得你想要的效果的最簡單/最安全的方法。讓我知道它是否有幫助！