複数のAJAX呼び出しと終了時の表示div

Question

複数のAJAX要求を行うJSスクリプトがあります。最初に私はIDで製品をリクエストしています。そして、私はこの製品のあらゆる種類の製品をリクエストしています。私が働いている環境が閉じられているので、私はバックエンドコーディングを行うことができません。

私の要求はうまくいきましたが、今はすべてのバリアントを1つのdivに追加しています。クライアントはこれを本当に気に入らないので、すべてのデータを変数にロードしてからフェード最後のすべてのバリアントの親divで？

私のスクリプトは次のようになります。

var variants = $('.single_product-variant-images'); 

$.ajax({ 
    url: productMasterURL, 
    success: function (data) { 
     $(data).find('Combinations Combination').each(function() { 
      var variantID = $(this).attr('ProductNumber'); 

       $.ajax({ 
        url: "/api.asp?id=" + escape(variantID), 
        dataType: "json", 
        async: true, 
        cache: true, 
        success: function (data) { 
         variants.append('<div class="variant"><a href="' + data.url + '" title="Vis variant"><img src="' + data.pictureLink + '" alt=""/></a></div>');             
         variants.find('.variant').fadeIn(300); 
       } 
      }); 

     }); 
    } 
}); 

Answer 1

いくつかの迅速かつ汚いソリューションが、解決策のアイデアやコンセプトが明確です。それは悪い解決策ですが、バックエンドコードにアクセスできない場合は、あなたのために働きます。

var all_load_interval; 
var is_all_data_ready = false; 

var all_data_count = 0; 

var variants = $('.single_product-variant-images'); 

$.ajax({ 
    url: productMasterURL, 
    success: function (data) { 
     var data_count = $(data).find('Combinations Combination').length; 
     $(data).find('Combinations Combination').each(function() { 
      var variantID = $(this).attr('ProductNumber'); 
      $.ajax({ 
       url: "/api.asp?id=" + escape(variantID), 
       dataType: "json", 
       async: true, 
       cache: true, 
       success: function (data) { 
        // make div with class variant hidden 
        variants.append('<div class="variant"><a href="' + data.url + '" title="Vis variant"><img src="' + data.pictureLink + '" alt=""/></a></div>'); 
        // count every variant 
        all_data_count += 1 
        if (all_data_count == data_count) { 
         // when all data got and created, lets trigger our interval - all_load_interval 
         is_all_data_ready = true; 
        }           
       } 
      }); 
     }); 
    } 

    all_load_interval = setInterval(function() { 
     // Check does all data load every second 
     if (is_all_data_ready) { 
     // show all div.variant 
     variants.find('.variant').fadeIn(300); 
     clearInterval(all_load_interval); 
     } 
    }, 1000); 
});