jquery使用动态设置的延迟对包含另一个要迭代的数组的数组进行迭代

我有一个JSON对象，它基本上是一个“项目”数组，每个项目中都有不同数量的图像。我希望能够循环外部（项目）数组，然后淡入淡出。但在淡入之后，我希望能够在外部阵列淡出并淡入下一个项目之前，循环浏览其相关图像（幻灯片）

我遇到的问题是如何让动态设置的延迟时间正确工作。下一个项目不会等到上一个项目完成，而最后一个项目出现得太晚了。从我的代码中可以明显看出，我很难理解整个计时方面

第一组
1.
2.
3.
第2组
1.
2.
第3组
1.
2.
3.
4.
$（文档）.ready（函数（）{
$（'.info'）。每个（函数（索引）{
var info=$（此）；
var img=info.children（'.img'）；
var transDur=500；
var imgDur=2000；
var galLegnth=img.长度；
var infoDelay=（（transDur*2）+imgDur）*galLegnth+200；
setInterval（函数（）{
info.fadeIn（transDur，function（）{
$（'.delayDisplay'）.text（infoDelay）；
img.each（函数（i）{
curImg=$（本）；
console.log（curImg.text（））；
//curImg.delay（1200.show（）；
setTimeout（函数（）{
库里姆·法代因（500）。延迟（1000）；
}，2000*i）；
});
}).延迟（信息延迟）。淡出（transDur）；
}，infoDelay*索引）；
});
});

---

请记住，不要问为什么，但我现在正试图避免创建函数来实现这一点。是的，JSON数据正在正确处理。正如您所见，我现在唯一的问题是理解时间安排。

而不是像@adeneo提到的那样实施延迟，在fadein Complete上使用回调

---

promise函数的使用将允许您轻松轻松地完成此操作

当你真正需要的是一个项目完成时的回调函数、启动下一个项目等时，避免使用函数似乎很愚蠢。检查一下，轻松创建连续动画。

<div class="delayDisplay"></div>

<div class="info">
    div 1
    <div class="img">1</div>
    <div class="img">2</div>
    <div class="img">3</div>
</div>

<div class="info">
    div 2
    <div class="img">1</div>
    <div class="img">2</div>
</div>

<div class="info">
    div 3
    <div class="img">1</div>
    <div class="img">2</div>
    <div class="img">3</div>
<div class="img">4</div>
</div>


$(document).ready(function() {

$('.info').each(function(index) {

    var info = $(this);  
    var img = info.children('.img');
    var transDur = 500;
    var imgDur = 2000;
    var galLegnth = img.length;
    var infoDelay = ((transDur * 2) + imgDur) * galLegnth + 200;

    setInterval(function() {

        info.fadeIn(transDur, function() {
            $('.delayDisplay').text(infoDelay);

            img.each(function(i) {  

                curImg = $(this);
                console.log(curImg.text());

                //curImg.delay(1200).show();

                setTimeout(function() {
                    curImg.fadeIn(500).delay(1000);
                }, 2000 * i);

            });

        }).delay(infoDelay).fadeOut(transDur);

    }, infoDelay * index);

});

});