jquery - jquery - .each 反復で ajax 呼び出しを実行する

Question

Ajax 経由でショッピング カートのデータを取得しています。

アイデアは次のとおりです: - ショッピング カートの行ごとに行を取得します - 行ごとに、選択オブジェクトを設定するオプションについてデータベースでチェックを行います - そのオプションが私の行のオプションと同じ場合、選択されます

オプション 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();
});