我有一个带有轮播的页面，每次幻灯片更改时，该页面都会发送ajax请求，并将与幻灯片相关的产品生成到底部的另一个轮播中。
在每张幻灯片更改后的那一刻，使用Ajax成功绘制了产品，尽管一旦加载了ajax请求，我就需要使用产品启动滑块。现在，滑块尝试在请求完成之前初始化。
在我添加的代码的底部，每个函数将每个getProducts函数添加到一个数组中，然后在完成后，它应该初始化滑块。尽管在控制台中，消息“此已初始化”发生在Ajax请求中的“成功”消息之前。
我是否在此示例中使用了延迟错误导致此问题？
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");
});
}
有了这个答案，构建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 : ''
};
});
}
注意，getProducts()现在没有副作用，但是返回一个数据对象。
然后，通过使用uniqueProducts.reduce(...)，您可以调用getProducts() 并处理Promise提供的数据。
假设一切都发生在一个函数中，您将得到如下结果：
function initializeCarousel() {
return $('.your-class [data-slick-index="' + currentSlide + '"] a')
.map(function(el) {
return el.href;
})
.get()
.filter(function(href, pos, self) {
return self.indexOf(href) == pos;
})
.reduce(function(sequence, url) {
var productPromise = getProducts(url);
return sequence
.then(function() {
return productPromise;
})
.then(function(dataObj) {
$(".carousel2").append(dataObj.image);
// ... dataObj.name ...
// ... dataObj.price ...
}, function() {
return sequence;//skip over error
});
}, $.when())//resolved starter promise for the reduction
.then(function () {
$('.carousel2').slick({ speed: 500, autoplay: false, autoplaySpeed: 4000, arrows:false });
console.log("this is initialized");
});
}
这种特殊的.reduce模式的特征是：
promises数组或jQuery的繁琐代码$.when.apply(null, promises)（或.all()其他库中更友好的代码）。本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句