javascript - 如何对 2 个 jQuery 动画的完整回调进行分组？

Question

我的函数有不同的执行路径，可能会调用一个或多个 .animate jQuery 方法。这些动画应该同时开始，不应该序列化。例如:

function moveDown()
{
    busy = true;
    if(some condition)
    {
        $(".selFrame").animate({top: $("#row" + currentSelRowIndex).offset().top});
    }
    else
    {
        $(".container").animate({scrollTop: $("#row" + currentRowIndex).offset().top - $("#row0").offset().top});
        $(".selFrame").animate({top: ($(".selFrame").offset().top + ch - remaining)});
    }
}

我的目标不是使用一些 busy 变量来检测是否所有动画都已完成，无论我们通过哪个执行路径。对于一个动画调用，很容易在动画 complete 上重置 busy 变量。但是，我不确定如何将 2 个或更多动画组合到一个事件中，我可以在其中重置 busy 变量，以确保所有动画都已完成。

更新

不幸的是，过滤解决方案在经过全面测试后没有给出好的结果。

document.addEventListener('keydown', function(e) {
    var runningAnimations = $(".container, .selFrame").filter(":animated").length;
    if(runningAnimations == 0)
    {
        switch(e.keyCode)
        {
        case 40: 
            moveDown();
            break;

它比没有效果好得多，但有时，在允许重新进入的双动画情况下。

我将尝试使用 promise 的第二种方法。

Answer 1

当你想在与元素集合相关的所有动画都完成时得到通知，你可以使用 promise :

$(".container, .selFrame").promise().then(function(){
      // all finished
      // we may change a boolean but usually we would call a callback
});

例如，这可以紧跟在您的 if/else 之后。