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();
});

Answer 1

async = false做的是强制后续代码等待ajax调用完成，包括执行done()

由于后续代码中的某些代码依赖于done()内部发生的内容，因此可以将所有后续代码放在done内，然后您将不再需要async = false。

或者您可以将这些外部功能包装在函数中，并在done()内调用这些函数。

因此，如果还有其他内容不依赖于done()的执行，则不必等待done()完成。

jquery - 在.each迭代中执行ajax调用

1 个答案: