Jquery 如何在继续之前在函数末尾添加暂停

我曾试着在早些时候发布这篇文章，但被投票关闭了。是的，我读过相关的话题，但我不明白，这就是为什么我要问这个问题

我有一个ul，有几个李。li的淡入，当列表中的最后一个淡入淡出时，下一个ul淡入。我想添加一个延迟，这样当每个ul的最后一个li淡出时，它会在淡出并移动到下一个列表之前暂停

HTML

我尝试过使用setTimeout（）、delay（）和。每个函数都可以，但都不起作用。另外，我不明白“回调”在这里的用法。同样，我也读过类似的问题，但找不到任何我理解的足以翻译的东西，所以我在这里提问。多谢各位

我尝试添加以下代码，试图在FadeLists函数运行一次后修改它（不希望在初始运行时出现延迟，只希望在函数的后续运行时出现延迟）

var myFuncCalls=0；
功能FadeLists（$lists，index）{
myFuncCalls++；
如果（myFuncCalls=$lists.length）index=0；
var$currentList=$lists.eq（索引）；
$currentList.fadeIn（函数（）{
AnimateList（$currentList.find（“li”），0，function（）{FadeLists（$lists，index+1）}）；
})
}else if（myFuncCalls>1）{
log（'I已被调用'+myFuncCalls+'times'）；
}
}
var$AllList=$（“ul.合同”）
时尚人士（$AllList，0）；

你是在说这样的话吗？如果要立即开始淡出，可以删除第一个setTimeout

函数AnimateList（$listItems，index，callback）{
如果（索引>=$listItems.length）{
//点击当前列表的末尾，设置开始淡入淡出的超时
setTimeout（函数（）{
$listItems.closest（“ul.contracts”）.fadeOut（函数（）{
$listItems.css（“左”，“400px”）.css（“不透明度”，0）；//重置
//设置超时以允许淡入完成
setTimeout（函数（）{
callback（）；//下一个列表
},500)
});
},1000);
返回；
}
$listItems.eq（index）.animate（{left:0，不透明性：1}，1500，function（）{
AnimateList（$listItems，索引+1，回调）
});
}

你是说你不理解自己的代码吗？我理解回调是什么——“在另一段代码运行后运行的代码”。我从一些不同的在线示例中拼凑出这段代码，希望完全理解它的结构。如果你想控制它，仅仅把它带到这一点是不够的。在你的代码中，

callback

是对传入函数的引用。在本例中，您正在传入

function（）{FadeLists（$lists，index+1）}

。尝试将

FadeLists

包装在

setTimeout

中，使其成为回调的一部分。请参阅更新问题的结尾。我可以获得第一次运行的代码，以及随后每次显示的控制台消息。但是，我不能让它在以后的运行中延迟。谢谢@Matti Price。比计算迭代次数和基于该数字修改代码要简单得多。奇怪的是，这种方法行得通吗（见我更新问题的结尾）？它可能会“行得通”，最好传入另一个类似“delayStart”之类的参数，并且只有当该变量设置为true时才延迟。

<ul>
    <li>one</li>
    ...etc
</ul>
//several other <ul> with same markup

function AnimateList($listItems, index, callback) {
    if (index >= $listItems.length) {
        $listItems.closest("ul.contracts").fadeOut(function() {
            $listItems.css("left","400px").css("opacity",0); //reset
            callback(); //next list
        });
        return;
    }

    $listItems.eq(index).animate({left:0, opacity:1}, 1500, function() {
        AnimateList($listItems, index+1, callback)
    });
}

function FadeLists($lists, index) {
    if (index >= $lists.length) index = 0;
    var $currentList = $lists.eq(index);
    $currentList.fadeIn(function() {
        AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
    })
}

var $allLists = $("ul.contracts")
FadeLists($allLists, 0);

var myFuncCalls = 0;
function FadeLists($lists, index) {
    myFuncCalls++;
    if(myFuncCalls <= 1) {
        if (index >= $lists.length) index = 0;
        var $currentList = $lists.eq(index);
        $currentList.fadeIn(function() {
            AnimateList($currentList.find("li"), 0, function() { FadeLists($lists, index + 1) });
        })
    } else if(myFuncCalls > 1) {
        console.log('I have been called' + myFuncCalls + 'times');
    }
}

var $allLists = $("ul.contracts")
FadeLists($allLists, 0);