暂停Jquery.each循环以确保代码完全执行？

Question

Quick question - I've got a $.each loop, with a function call inside with a callback function

what can i put inside of that callback function to continue the loop

$.each(product, function () {
    AddToCart($(this), function () {

    });
});

right now - if it loops through 5 products, only the last one gets added to the cart

i need a way of pausing the loop to ensure the product is added to the cart before adding the next one

thanks!

Here is the AddToCart function:

function AddToCart(product, callback) {
            //Get the product ID and info
            var product = product;
            var productid = product.children(".productId").val();
            var productName = product.children(".productName").val();
            var productPage = product.children(".productPage").attr("href");
            var productImage = product.find(".productImage").attr("src");
            var productPrice = product.find(".productPrice").val();
            var productMSRP = product.find(".productMSRP").val();

            var productList = $("#productList");
            var exists = false;
            listItems = $("#productList").find("li");
            // Loop through to see if the product has already been added
            listItems.each(function (idx, li) {
                var item = $(li);
                var itemId = item.children(".productId").val();
                if (itemId == productid) {
                    exists = true;
                    //find its quantity
                    var quantity = item.children(".quantity").html();

                    //increment the quantity
                    quantity = parseInt(quantity) + 1;
                    item.children(".quantity").html(quantity);
                }
            });

            if (!exists) {
                var listItem = "<li>" +
                                    "<a href='" + productPage + "'><img height='80px' src='" + productImage + "'/></a>" +
                                    "<input type='button' value='X' class='cartRemoveBtn'/>" +
                                    "<span class='quantity'>1</span>" +
                                    "<div class='tooltip_info'>" +
                                    "<span class='tooltip_name'>" + productName + "</span>" +
                                    "<span class='tooltip_price'>Our Price: $" + parseFloat(productPrice, 10).toFixed(2) + "</span>" +
                                    "<span class='tooltip_msrp'>List Price: $" + parseFloat(productMSRP, 10).toFixed(2) + "</span>" +
                                    "<span class='tooltip_savings'>You Save: $" + parseFloat(productMSRP - productPrice, 10).toFixed(2) + "</span>" +
                                    "</div>" +
                                    "<input type='hidden' class='productId' value='" + productid + "' />" +
                                    "<input type='hidden' class='productPrice' value='" + productPrice + "' />" +
                                    "<input type='hidden' class='productMSRP' value='" + productMSRP + "' />" +
                               "</li>";


                productList.prepend(listItem);
            }
            OpenCart();
            updateTotals();
            initializeCart();
            refreshTooltips();
            $.post('/Store/Cart/AddToCart/' + productid, function () {
                callback();
            });
            return false;
        }

Answer 1

$.each is a synchronous function, so as long as the actions in AddToCart are synchronous then each call will complete before the next one is invoked.

... that said, if you're doing something like posting an asynchronous AJAX request in AddToCart, and you want to make sure each request finishes before posting the next one, than $.each() is not the right approach. Instead, you'll need to have your items in a queue (array) that you pull from each time a request completes.

Answer 2

The $.each function is already synchronous meaning that it is stepping through each product one at a time, first to last. The first function call is blocking the second function call until the first function returns.

Here is a working pseudo-code example:

function AddToCart(item, callback){
  alert(item);
};

var products = [1,2,3,4,5];

$.each(products, function(index, product){
  AddToCart(product);
});

Possible Issue

The AddToCart function is registering a callback on post (an asynchronous call from inside of AddToCart) which means that it is returning before the post function has had time to complete. I don't know what your callback is doing but this is probably completing all of the AddToCart calls before the first post is returning from '/Store/Cart/AddToCart/'

Solution

Run the code that depends upon the return of the post inside of the callback of the AddToCart function.

Alternate Solution

Use another form of stepping through the products... this uses the callback of AddToCart to call the next product addition.

function AddEachToCart(products) {
  // ensure products is not a js Array
  products = $(products).toArray();
  if (products.length > 0) 
    AddToCart(products.shift(), function(){AddEachToCart(products)});
};

Answer 3

$.each could be appropriate here; however, the issue is that since an asynchronous call is involved, you cannot expect that you can directly reference the current value from within the asynchronous handler. You have to pass the object you're trying to manipulate within the async callback to the async call as a reference.

Hope that makes sense.