Jquery 在启动第二个ajax之前完成第一个ajax，在启动第三个ajax内部循环之前完成第二个ajax

我有来自api的json响应，我需要循环并为每个产品创建woocommerce产品或变体产品

{
  "pagination": {
    "page": 1,
    "per_page": 50,
    "results": 2,
    "pages": 1,
    "deleted_product": 0
  },
  "products": [
    {
      "id": "02dcd191-aebf-11e6-f485-5abe3e19de38aotbb94CZY3STcO1MxQS1S",
      "name": "testProduct112312312312345325345",
      "description": null,
      "sku": "testProduct112312312312345325345",
      "active": 1,
      "cost_price": 0,
      "list_price": null,
      "sell_price": 17.28,
      "tax_value": 1.728,
      "tax_name": "Sales_tax_sample",
      "tax_rate": 0.1,
      "tax_id": "02dcd191-aebf-11e6-f485-1c85a7f11c83",
      "includes_tax": true,
      "quantity": null,
      "product_type": null,
      "update_at": "2016-08-05 03:42:14",
      "deleted_at": null,
      "images": [],
      "variants": [],
      "tags": [],
      "outlets": [
        {
          "outlet_id": "0a422413-2fb9-11e6-ff63-0b90c839fa9e",
          "name": "Main Outlet",
          "quantity": 10
        }
      ],
      "price_books": [
        {
          "id": "65f85250-5ce8-9295-59be-40d76716eb00",
          "price": 17.28
        }
      ],
      "brands": []
    },
    {
      "id": "02dcd191-aebf-11e6-f485-5abe44095b97aotbb94CZY3STcO1MxQS1S",
      "name": "var1444444444444444444444444444444444444444444",
      "description": "<p>jameshwart</p>",
      "sku": "testvar_23234",
      "active": 1,
      "cost_price": 0,
      "list_price": null,
      "sell_price": 7.49545,
      "tax_value": 0.74955,
      "tax_name": "Sales_tax_sample",
      "tax_rate": 0.1,
      "tax_id": "02dcd191-aebf-11e6-f485-1c85a7f11c83",
      "includes_tax": true,
      "quantity": null,
      "product_type": null,
      "update_at": "2016-08-05 05:55:55",
      "deleted_at": null,
      "images": [],
      "variants": [
        {
          "id": "02dcd191-aebf-11e6-f485-5abe44095b97aotbb94CZY3STcO1MxQS1S",
          "name": "var1444444444444444444444444444444444444444444 / Blue",
          "sku": "10017",
          "quantity": null,
          "tax_value": 0.74955,
          "tax_name": "Sales_tax_sample",
          "tax_rate": 0.1,
          "tax_id": "02dcd191-aebf-11e6-f485-1c85a7f11c83",
          "includes_tax": true,
          "list_price": null,
          "sell_price": 7.49545,
          "cost_price": 0,
          "option_one_name": "Colour",
          "option_one_value": "Blue",
          "option_two_name": null,
          "option_two_value": null,
          "option_three_name": null,
          "option_three_value": null,
          "update_at": "2016-08-05 05:55:55",
          "deleted_at": null,
          "outlets": [
            {
              "outlet_id": "0a422413-2fb9-11e6-ff63-0b90c839fa9e",
              "name": "Main Outlet",
              "quantity": 0
            }
          ],
          "price_books": [
            {
              "id": "b343e66b-33d1-41af-9969-9df911a29b7baotbb94CZY3STcO1MxQS1S",
              "price": 7.49545
            }
          ]
        },
        {
          "id": "02dcd191-aebf-11e6-f485-5abe45693e6caotbb94CZY3STcO1MxQS1S",
          "name": "var1444444444444444444444444444444444444444444 / Red",
          "sku": "sku_119",
          "quantity": null,
          "tax_value": 0.99773,
          "tax_name": "Sales_tax_sample",
          "tax_rate": 0.1,
          "tax_id": "02dcd191-aebf-11e6-f485-1c85a7f11c83",
          "includes_tax": true,
          "list_price": null,
          "sell_price": 9.97727,
          "cost_price": 0,
          "option_one_name": "Colour",
          "option_one_value": "Red",
          "option_two_name": null,
          "option_two_value": null,
          "option_three_name": null,
          "option_three_value": null,
          "update_at": "2016-08-05 05:55:55",
          "deleted_at": null,
          "outlets": [
            {
              "outlet_id": "0a422413-2fb9-11e6-ff63-0b90c839fa9e",
              "name": "Main Outlet",
              "quantity": 0
            }
          ],
          "price_books": [
            {
              "id": "fdd0f01b-a2c2-0263-b17c-3f63fdf0e6b8",
              "price": 9.97727
            }
          ]
        }
      ],
      "tags": [],
      "outlets": [
        {
          "outlet_id": "0a422413-2fb9-11e6-ff63-0b90c839fa9e",
          "name": "Main Outlet",
          "quantity": 0
        }
      ],
      "price_books": [
        {
          "id": "b343e66b-33d1-41af-9969-9df911a29b7baotbb94CZY3STcO1MxQS1S",
          "price": 7.49545
        }
      ],
      "brands": []
    }
  ]
}

从上面的json可以看出，可能有很多可能的页面，每页最多有50个产品。我已经编写了代码来获取第一个页面，就像上面的示例json一样，并在每个产品上循环。下面是我的代码

function product_to_woo( page ){

            //check if page is undefined then we set it to one
            if(typeof page == 'undefined'){
                page = 1;
            }else if( page <= 0){
                //Make sure we always start to page 1
                page = 1;
            }
            var product_number = 0;

            get_product_by_page(page, function(res){
                var product_count = res.products.length;

                if(product_count > 0){

                    for( var i = 0; i < product_count; i++){


                        product = res.products[i];
                        if( product.deleted_at == null ){
                            product_number = i+1;
                        }


                        if(res.pagination.page > 1){
                            product_number += PER_PAGE;//PER_PAGE is constant value 50
                        }

                        var p_data = {
                            action              :   'import_to_woo',
                            page                :   res.pagination.page,
                            product_total_count :   res.pagination.results,
                            product             :   product,
                            product_number      :   product_number,
                            deleted_product     :   res.pagination.deleted_product
                        };

                        post_data(p_data,function(p_res){
                           //I have done some message for the users
                        });
                    }

                }



                if(res.pagination.page <= res.pagination.pages){

                    page = parseInt(res.pagination.page) + 1;

                    if(page <= res.pagination.pages){
                        product_to_woo(page);
                    }

                }

            });

    }

我的问题是在for循环中设置ajax请求。它在第一个ajax请求完成之前发送另一个ajax请求，并发送第三个ajax请求，即使第二个ajax尚未完成

---

还有其他方法可以做到这一点吗？但区别在于，让第一个ajax在第二个ajax被激发之前完成，然后在第二个请求完成之后，也会激发第四个ajax请求，依此类推，直到没有产品剩下

您可以在第一个ajax的successCallback中运行第二个ajax。并在第一个ajax的successCallback中运行第三个ajax。诸如此类

//first ajax
$.post("someurl.php", { data: someData }, function (response1) {
    //do work with the response of the ajax
    //...

    //second ajax
    $.post("someotherurl.php", { data: someOtherData }, function (response2) {
        //...

        //third ajax
        $.post("yetanotherurl.php", { data: yetAnotherData }, function (response3) {
            //...
        });
    });
});

管理此回调地狱的更好方法是使用对象的类似行为

在您的特定情况下，您正在循环中进行并发ajax调用。假设您不知道调用的确切数量，那么上述方法将不适用或充其量是非常麻烦的。但是，您可以使用并确保在运行ajax之前，所有先前的ajax调用和所有相关工作都已完成

var defs = [];
for (var i = 0; i < 3; i++) {
    var d = $.Deferred();

    //make sure to wait for all the previous ajax calls to get resolved
    $.when.apply(this, defs).done(function () {
        $.post("url", { data: someData }, function (response) {
            //do work with response
            //...

            d.resolve(); //resolve the deferred to let the next ajax know it is done
        });
    });

    defs.push(d);
}