Javascript 在所有产品都已加载时使用延迟

我有一个带有旋转木马的页面，每当幻灯片发生变化时，该页面都会发送一个ajax请求，并会在底部的另一个旋转木马中生成与幻灯片相关的产品

在每张幻灯片都发生更改的时候，产品是用Ajax成功绘制的，不过我需要在加载Ajax请求后用产品启动滑块。现在，滑块尝试在请求完成之前初始化

在我添加的代码的底部，each函数将每个getProducts函数添加到一个数组中，完成后，它应该初始化滑块。尽管在控制台中，“this is initialized”消息发生在Ajax请求中的“success”消息之前

我是否在本例中使用了延迟错误导致此问题

        var products = [],
        uniqueProducts = [], 
        defs = [];           
        var el;
        $('.your-class [data-slick-index="' + currentSlide + '"] a').each(function(i) { 
              el = $(this).attr("href");      
              products.push(el);
              $.each(products, function(j, el) {
                  if ($.inArray(el, uniqueProducts) === -1)
                      uniqueProducts.push(el);
                      console.log("pushed" + uniqueProducts);
              });
        });
        function getProducts(el) {
          var def = new $.Deferred(); 
          var url = el;

          $.get(url, function(data) {  
                var imageArray = data.match(/<img itemprop="image" [\S\s]*?>/ig);
                var $image = $(imageArray[0]);
                var imageUrl = $image.attr('src');
                var name = $image.attr('title');
                var priceArray = data.match(/<p class="price">[\S\s]*?<\/p>/ig);
                var priceEl = $(priceArray[0]).find('[itemprop=price]');
                priceEl.children().remove();
                var price = priceEl.text() ? '$' + priceEl.text() : '';
                $( ".carousel2" ).append( '<div><img src=\" '+ imageUrl +'\"></div>');
                console.log("success");
                def.resolve();
          });
          return def.promise();
        }

      $.each(uniqueProducts, function(i, el) {
          defs.push(getProducts(el));
      });

      $.when($,defs).done(function () {
          $('.carousel2').slick({ speed: 500, autoplay: false, autoplaySpeed: 4000, arrows:false });
          console.log("this is initialized");
      });           
    } 

var产品=[]，
uniqueProducts=[]，
defs=[]；
var-el；
$（'.your类[data slick index=“'+currentSlide+'“]a'）。每个（函数（i）{
el=$（this.attr（“href”）；
产品.推送（el）；
美元。每个（产品、功能（j、el）{
如果（$.inArray（el，uniqueProducts）=-1）
独特产品。推送（el）；
控制台日志（“推送”+唯一产品）；
});
});
功能产品（el）{
var def=new$.Deferred（）；
var url=el；
$.get（url，函数（数据）{
var imageArray=data.match（/[\S\S]*？/ig）；
var pricel=$（priceArray[0]）。查找（“[itemprop=price]”）；
pricel.children（）.remove（）；
var price=pricel.text（）？“$”+pricel.text（）：”；
$（“.carousel2”）。追加（“”）；
控制台日志（“成功”）；
def.resolve（）；
});
返回def.promise（）；
}
美元。每个（唯一产品、功能（i、el）{
defs.push（getProducts（el））；
});
$.when（$，defs）.done（函数（）{
$（'.carousel2'）.slick（{speed:500，autoplay:false，autoplay speed:4000，arrows:false}）；
log（“这已初始化”）；
});           
} 

我已经有一段时间没有玩过

$。当

时，但我认为您可以在不创建

$的情况下实现此功能。Deferred（）

实例为

$。get

将为您返回此实例

可能尝试让

getProducts

返回

$。获取
而不是
def。承诺
并删除对
def
的任何引用

希望能帮到你

p、 s我找到了一些使用此
$的旧代码。当
查看如何使用
$。获取
。我已经对它进行了简化，按照下面的思路应该可以工作

$.when([
  $.get("data/a.json"),
  $.get("data/b.json"),
  $.get("data/c.json")
]).done(function (t1, t2, t3) {
  app.a = t1[0];
  app.b = t2[0];
  app.c = t3[0];
});

我已经有一段时间没有玩过
$。当
时，但我认为您可以在不创建
$的情况下使用它。延迟（）
实例为
$。get
将为您返回此实例

可能尝试让
getProducts
返回
$。获取
而不是
def。承诺
并删除对
def
的任何引用

希望能帮到你

p、 s我找到了一些使用此
$的旧代码。当
查看如何使用
$。获取
。我已经对它进行了简化，按照下面的思路应该可以工作

$.when([
  $.get("data/a.json"),
  $.get("data/b.json"),
  $.get("data/c.json")
]).done(function (t1, t2, t3) {
  app.a = t1[0];
  app.b = t2[0];
  app.c = t3[0];
});

归功于，构建
uniqueProducts
将简化为两个一行程序

var uniqueProducts = $('.your-class [data-slick-index="' + currentSlide + '"] a').map(function(el) {
    return $(el).attr('href');
}).get().filter(function(href, pos, self) {
    return self.indexOf(href) == pos;
});

而
getProducts（）
应该简化如下：

function getProducts(url) {
    return $.get(url).then(function(data) {
        var image = $(data.match(/<img itemprop="image" [\S\s]*?>/ig)[0]);
        var price = $(data.match(/<p class="price">[\S\s]*?<\/p>/ig)[0]).find('[itemprop=price]').children().remove().end().text();
        return {
            name: image.attr('title'),
            image: image,
            price: price ? '$' + price : ''
        };
    });
}

此特定.reduce模式的功能包括：


ajax调用是并行进行的
如果需要，非常简单地转换串行调用
附加到旋转木马的图像顺序将与缩减数组一致，即“正确顺序”
任何单个ajax错误都不会破坏整个企业
不需要中间的
promises
数组，也不需要jQuery繁琐的
$.when.apply（null，promises）
（或其他libs中更友好的
.all（）
）
由于归功于，构建
uniqueProducts
将简化为两个一行程序

var uniqueProducts = $('.your-class [data-slick-index="' + currentSlide + '"] a').map(function(el) {
    return $(el).attr('href');
}).get().filter(function(href, pos, self) {
    return self.indexOf(href) == pos;
});

而
getProducts（）
应该简化如下：

function getProducts(url) {
    return $.get(url).then(function(data) {
        var image = $(data.match(/<img itemprop="image" [\S\s]*?>/ig)[0]);
        var price = $(data.match(/<p class="price">[\S\s]*?<\/p>/ig)[0]).find('[itemprop=price]').children().remove().end().text();
        return {
            name: image.attr('title'),
            image: image,
            price: price ? '$' + price : ''
        };
    });
}

此特定.reduce模式的功能包括：


ajax调用是并行进行的
如果需要，非常简单地转换串行调用
附加到旋转木马的图像顺序将与缩减数组一致，即“正确顺序”
任何单个ajax错误都不会破坏整个企业
不需要中间的
promises
数组，也不需要jQuery繁琐的
$.when.apply（null，promises）
（或其他libs中更友好的
.all（）
）
感谢您的帮助，看起来我在$后面缺少了一个“.apply”。不过，在最后一个函数中。如果可以，我将尝试您的解决方案，看看是否有效。没问题：）很乐意帮助我找到了一个我以前使用过它的示例，并将其附加到我的答案中。您只需传入一个
$数组。get
请求似乎可以正常工作。感谢您的帮助，看起来我在$后面缺少了一个“.apply”。但在上一个函数中，当我可以时，我将尝试您的解决方案，看看是否有效（没问题：）很乐意帮助我找到一个我以前使用过它的示例，并将其附加到我的答案中。您只需传入一个
$数组。get
请求似乎可以正常工作。需要在最后一个函数$.when.apply（$，defs）.done（函数（）{$（'.carousel2'）.slick（{speed:500，autoplay:false，autoplaySpeed:4000，arrows:false}）中的“$.when”之后添加apply）；console.log（“这已初始化”）;           });需要在最后一个函数中的“$.when”之后添加apply