2016-08-07 14 views
2

私はループする必要がある私たちのapiからこのjsonレスポンスを持っています。最初のアヤックスを終了してから2番目のアヤックスを終了してループ内で3番目のアヤックスを終了します

{ 
    "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からわかるように、1ページには多くの可能なページと最大50個の製品があります。上記の例のような最初のページを取得し、各製品をループするようにコーディングしました。以下は私のコードです

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

       } 

      }); 

    } 

私の問題は、ループ内で設定されているajaxです。最初のajaxリクエストが完了する前に別のajaxリクエストを送信し、2番目のajaxがまだ終了していない場合でも3番目のajaxリクエストを送信します。

これを行う別の方法はありますか?違いは、最初のajaxがもう1つの2番目のajaxが開始される前に終了し、2番目の要求が完了すると4番目のajax要求が発生するまで続きます商品は残っていません。

答えて

3

最初のajaxのsuccessCallbackの中で2番目のajaxを実行できます。最初のAjaxのsuccessCallbackの中で3番目の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) { 
      //... 
     }); 
    }); 
}); 

良い方法は、このコールバック地獄jqXhrオブジェクトの振る舞いのようなdeferredを使用することです管理します。あなたの特定のケースで


、あなたはループ内部同時AJAX呼び出しを作っています。コールの正確な数がわからないと仮定すると、上記の方法は、適用できないか、または非常に扱いにくいものになります。しかし、jQuery.Deferred()jQuery.when()を使って、以前の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); 
} 
関連する問題