jquery - 각 반복마다 ajax 호출 수행

Question

Ajax를 통해 장바구니에 대한 데이터를 얻고 있습니다. - 내가 쇼핑 카트 의 줄에 라인을 얻을 - 옵션이 선택 객체 를 채우는 데에 대한 한 줄에 나는 DB에 체크를 할 -이 옵션은 하나의 같은 경우 :

아이디어는 다음과 같다 내 라인에서 선택된다.

async 옵션을 false로 설정하면이 작업을 수행 할 수있다. 그러나 내가 여기서 읽었던 것처럼 이것은 선호되는 방법이 아닙니다. 내 아키텍처를 어떻게 조정해야합니까? 그 이후의 코드 중 일부는 done()의 내부에서 일어나는 것들에 의존하기 때문에 무엇을 async = false

//get items from cart 
$.ajax({ 
    type: "POST", 
    url: "db/getImagesCart.php" 
}).done(function(data) { 
    //populate carts ul 
    var items = []; 
    obj = $.parseJSON(data.trim()); 
    $.each(obj, function(id, value) { 
     //list formats of this item 
     $.ajax({ 
      type: "POST", 
      url: "db/getFormats.php", 
      async: false 
     }).done(function(data){ 
      var select_format = "<select style='text-align: center;'>"; 
      formats = $.parseJSON(data.trim()); 
      $.each(formats, function(id, test){ 
       //add select tot variable + select if the same 
       if(test.format_id == value.idformat){ 
        select_format += "<option value=" + test.format_id + " SELECTED data-price=" + test.format_price + ">" + test.format_name + "</option>"; 
       } else { 
        select_format += "<option value=" + test.format_id + " data-price=" + test.format_price + ">" + test.format_name + "</option>"; 
       } 
      }); 
      select_format += "</select>"; 
      items.push('<tr id="row' + value.item_id + '"><td class="remove"><a href="#" class="delete" id="' + value.item_id + '"><img src="img/delete.png" height="25px" style="border: 0;" /></a></td><td class="image"><a class="fancybox" rel="group" href="' + value.path + '"><img src="' + value.path_thumb + '" style="max-width: 100px; height: 75px;" /></a></td><td class="formaat">' + select_format + '</td><td class="totalprice">&euro; ' + value.price + '</td></tr>'); 
     }); 

    }); 
    $("tbody").html(items.join('')); 
    $(".fancybox").fancybox({ 
     openEffect: 'elastic', 
     closeEffect: 'elastic', 
     nextEffect: 'fade', 
     prevEffect: 'fade' 
    }); 
    $(".delete").click(function(){ 
     var cart_item = $(this).attr("id"); 
     var variables = 'action=2' + '&cart_item_id=' + cart_item; 
     $.ajax({ 
      type: "POST", 
      url: "db/cart.php", 
      data: variables 
     }).done(function(data){ 
      if($.browser.msie){ 
       $('#row' + cart_item).find('td').fadeOut('slow', function(){ 
        $('#row' + cart_item).find('td').parent().remove(); 
       }); 
      } else { 
       $('#row' + cart_item).fadeOut('slow', function(){ 
        $('#row' + cart_item).find('td').parent().remove(); 
       }); 
      } 
      calc_full(); 
     }) 
    }); 
    $(".formaat").change(function(){ 
     //recalculate prices 
     $('.cart tr:gt(0)').each(function(){ 
      var theprice = $(this).find('.formaat select :selected').attr("data-price"); 
      $(this).find('.totalprice').html("&euro; " + theprice); 
      //save to db 
      var cart_item = $(this).attr('id').slice(3); 
      var formaat = $(this).find('.formaat select :selected').val(); 
      var variables = 'action=3' + '&format=' + formaat + '&cart_item_id=' + cart_item; 
      $.post("db/cart.php", variables, function(data){ 
      }); 
      calc_full(); 
     }); 
    }) 
    calc_full(); 
}); 

Answer 1

는 done()

의 실행을 포함하여, 아약스 호출이 완료 될 때까지 기다려야 다음 코드를 강제하는 것입니다 당신 은 그 후속 코드를 모두 done 안에 넣은 다음 더 이상 async = false을 필요로하지 않습니다.

또는 함수에서 해당 외부 기능을 랩핑하고 done() 내부에서 해당 함수를 호출 할 수 있습니다.

done()의 실행에 종속되지 않는 다른 항목이있는 경우 done()이 완료 될 때까지 기다릴 필요가 없습니다.