有什么方法可以在JavaScript中等待动画完成

Question

这可能是一个漫长的选择，但是我需要以某种方式解决此问题，如果您还有其他可以帮助我获得相同最终结果的技巧，请告诉我！

我有一个 ，上面有很多具有独特ID的物品。这些项目通过 cefsharp 应用程序（每1000ms）持续更新。我目前有一个名为“ show ”的类，将列表项目从0高到指定的高度转换为1秒。删除该项目时（从类删除显示）也是如此。因此，这里的一切都按预期工作。

但是，由于某种原因，时不时地，我的列表动画似乎突然取消了。我不知道为什么。就在几分钟前，我意识到这是我的 sortlist 函数：

function sortList() {
    $("#orderQueueList li").sort(function (a, b) {
        return parseInt($(a).data('indexn')) - parseInt($(b).data('indexn'));
    }).appendTo('#orderQueueList');
}

每次将新项目添加到列表中，或者当前项目都具有“ indexn”值更新。因此，如果动画被排队（动画具有5秒的settimeout），并且在此期间或在实际动画期间对列表进行排序，则将被取消。

我真的无法弄清楚如何解决这个问题。我最初的想法是，列表将等到所有动画完成。但是，动画是.css的侧面，因此我不确定是否可以。我一直在谷歌搜索，但找不到答案。

我要么要立即执行5秒的延迟（因此动画已经完成），要么等待sortlist函数才能等到动画完成。这是否可以通过JavaScript/jQuery在某种程度上？

谢谢你！

Answer 1

您可以将另一个参数添加到动画函数中，该函数完成后触发 jquery doc在这里解释（5000）是持续时间）
请注意，每个匹配元素都调用一次功能

$( "#clickme" ).click(() => {
    $( "#whatever" ).animate({
        left: "+=50",
    }, 5000, () => { // <--- other parameter is here
        // Animation complete.
    });
});