Question

我有一个JS脚本执行多个AJAX请求。首先，我按ID要求产品，然后我要求提供此产品的每个变体。我无法进行任何形式的后端编码，因为我工作的环境已经关闭。

我的请求工作正常，但是现在我将每个变量附加到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);
});

多个AJAX调用并在完成时显示div

1 个答案: