javascript - jQuery AJAX loop doesn't finish before 'done'

Question

I have a photo gallery that can be updated via an looped ajax call. The problem is, it only updates about 6 images before the "done" gets fired and the page changes. How can I make the script wait until the entire loop is finished before it executes 'done'?

$('#selectAlbum').change(function() {
  var thisAlbID = $(this).children(":selected").attr("id");
  var thisAlbURL = $(this).val();
  $('.medSelectHighlight').each(function() {
     jQuery.ajax({
       url:'system/move-media.php',
       data:{photo_id:$(this).attr('id'),album_id:thisAlbID},
       dataType: 'json',
       type:'POST'
    }).done(function() {
       document.location.href='../media/'+thisAlbURL;
    });
}); 

});

I should also add that I have tried async false and it worked - however I have read that it should be avoided...

Answer 1

我注意到done每次触发 ajax 时都会执行。你的done放置正确吗？我的意思是，它应该在each右括号的末尾，不是吗？尝试这个：

$('.medSelectHighlight').each(function() 
  {
        jQuery.ajax
        ({
            url:'system/move-media.php',
            data:{photo_id:$(this).attr('id'),album_id:thisAlbID},
            dataType: 'json',
            type:'POST'
         });
   }).done(function() 
         {
               document.location.href='../media/'+thisAlbURL;
         });

Answer 2

在 DPP 的帮助下，我最终使用了ajaxStop它，它就像一个魅力。代码如下，适用于有相同问题的人...

$('#selectAlbum').change(function() {
  $('body').css('cursor', 'progress');
  var thisAlbID = $(this).children(":selected").attr("id");
  var thisAlbURL = $(this).val();
     $('.medSelectHighlight').each(function() {
        jQuery.ajax({
        url:'system/move-media.php',
        data:{photo_id:$(this).attr('id'),album_id:thisAlbID},
        dataType: 'json',
        type:'POST'
        });
     }).ajaxStop(function() {
     document.location.href='media/'+thisAlbURL;
     });

});