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

Question

简单问题 - 我有一个 $.each 循环，内部有一个带有回调函数的函数调用

我可以在回调函数中放入什么来继续循环

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

    });
});

现在 - 如果循环浏览 5 个产品，则只有最后一个会添加到购物车

我需要一种暂停循环的方法，以确保在添加下一个产品之前将产品添加到购物车

谢谢!

这是 AddToCart 函数:

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 函数已经是同步的，这意味着它一次从第一个到最后一个单步执行每个产品。第一个函数调用会阻塞第二个函数调用，直到第一个函数返回。

这是一个有效的伪代码示例:

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

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

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

可能的问题

AddToCart 函数正在注册 post 回调(来自 AddToCart 内部的异步调用)，这意味着它在 post 函数有时间完成之前返回。我不知道您的回调正在做什么，但这可能是在第一篇文章从“/Store/Cart/AddToCart/”返回之前完成所有 AddToCart 调用

解决方案

运行取决于 AddToCart 函数回调内帖子返回的代码。

替代解决方案

使用另一种形式逐步浏览产品...这使用 AddToCart 的回调来调用下一个产品添加。

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