javascript - 等待 jQuery 动画完成

Question

我有以下 jQuery 代码:

var id = $(this).data('id');
if ($('#container').is(':visible'))
{
    $('#container').slideToggle('fast', function() {
        $('#' + id).toggle();
    });
}
else
{
    $('#' + id).toggle(0, function() {
        $('#container').slideToggle('fast');
    });
}

此代码包含在一个更大的方法中，我不会在此处发布。该方法负责在一组按钮的样式和行为之间切换，在上面的代码中，按下按钮时显示/隐藏容器。如果当前按下按钮(因此显示容器)但用户单击另一个按钮，则首先在当前按下的按钮上调用上述方法以隐藏其容器，然后在刚刚单击的按钮上调用以显示 它的容器。

问题是在为刚刚按下的按钮执行方法之前，当前按下的按钮的动画没有完成(或者甚至似乎没有开始，正如我在调试时观察到的那样)。

有谁知道如何让代码在从此方法返回之前等待动画队列清空？

Answer 1

您应该使用 jQuery 为动画元素(以及其他东西，如 XHR 请求)提供的 Deferred/promise 对象。

这意味着，您始终可以像这样 Hook 到 promise

function foo() {
    return $('#someElement').slideToggle('fast', function() {
    }).promise();
}

然后像这样调用它

foo().done(function() {
    alert('animation finished');
}

演示:http://jsfiddle.net/dCVnG/