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

$。每个都是同步函数，因此只要AddToCart中的操作是同步的，那么每个调用都将在调用下一个调用之前完成。

...那就是说，如果你正在做一些事情，比如在AddToCart中发布异步AJAX请求，并且你想确保每个请求在发布下一个请求之前完成，那么$ .each（）不是正确的方法。相反，您需要将您的项目放在每次请求完成时从中提取的队列（数组）中。

Answer 2

$ .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)});
};

Answer 3

$。每个都适合这里;但问题是，由于涉及异步调用，您不能指望您可以直接从异步处理程序中引用当前值。您必须将您尝试在异步回调中操作的对象作为参考传递给异步调用。

希望这是有道理的。

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

3 个答案:

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

可能的问题

解决方案

替代解决方案