为什么这个jQuery循环不是每次都触发？

Question

我有一个页面(Woocommerce的产品类别)，上面有12种产品。每个产品都有一个数量字段，当您单击页面底部的按钮时，它会循环遍历产品，并将数量大于零的任何产品添加到购物车中:

$('.add-products').on('click', function() {
$('.product-qty').each(function() {
if ($(this).val() > 0) {
var pid = $(this).closest('.product-select').attr('product-id');
var qty = $(this).val();
add_to_cart(pid, qty);
}   
});
});

添加到购物车函数如下:

function add_to_cart(product_id, qty) {
$.ajax({
type: "POST",
url: '/wp-admin/admin-ajax.php',
data: {action : 'add_to_cart', 'product_id': product_id, 'qty': qty},
success : function(response) {
console.log(product_id + ": " + qty);
}, error : function(response) {
// throw error
}
});
}

问题是，如果我设置了一堆产品的数量，比如其中四个，它会随机添加一些到购物车中，而不是其他。我尝试使add_to_cart()异步，我尝试使用settimeout()给它时间运行，但无论我做什么，它永远不会添加所有的产品与数量>0到购物车。在add-to_cart()函数内部，它回显成功回调中的所有产品，但它们最终不会出现在实际的购物车中。

有更好的方法吗?

我尝试使add_to_cart()异步，我尝试使用settimeout()给它时间运行。我看了这里的搜索结果和谷歌，但还没有找到答案。

Answer 1

不建议使用循环ajax。

假设您可以更改服务器端处理，您可以这样做:

$('.add-products').on('click', function() {
const products = [];
$('.product-qty').each(function() {
if ($(this).val() > 0) {
var pid = $(this).closest('.product-select').attr('product-id');
var qty = $(this).val();
products.push({pid, qty});
}   
});
if (products.length > 0) addToCart(products)
});

并更改addtocart以将对象作为JSON字符串发送到服务器