Question

我想在执行函数中的动画后触发一个函数。因此我选择了jquery承诺。但是.done函数会在第一个动画“＃block; .block1＆＃39;已完成，它不会等待动画与＆＃39; .block2＆＃39;。

HTML：

<div class="block1"></div>
<div class="block2"></div>

使用Javascript：

$(document).ready(function () {
doAnimation().done(function () {
    alert('promise');
});
});

function doAnimation() {
    var deferred = $.Deferred();
    $('.block1').animate({
        'marginLeft': '200px', 'width': '400px'
    }, 2000, function () {
        deferred.resolve();
    });

    $('.block2').animate({
        'marginLeft': '0px', 'height': '400px'
    }, 4500, function () {
        deferred.resolve();
    });

    return deferred.promise();
}

CSS：

.block1,.block2
    {
        width:200px;
        height:200px;
        background:orange;
        border:1px solid #ccc;    
    }

Answer 1

只要一次调用resolve，就会解决一个Promise，如果你想等待两个事件，你需要创建两个promises并等待它们，例如：

function doAnimation() {
    var deferred1 = $.Deferred();
    var deferred2 = $.Deferred();
    $('.block1').animate({
        'marginLeft': '200px', 'width': '400px'
    }, 2000, function () {
        deferred1.resolve();
    });

    $('.block2').animate({
        'marginLeft': '0px', 'height': '400px'
    }, 4500, function () {
        deferred2.resolve();
    });

    return $.when(deferred1, deferred2);
}

Answer 2

我稍微更改了您的代码，现在它正在运行：https://jsfiddle.net/bys2gbt1/

发生的事情是你只对这两个动画使用了1个承诺。当最快的动画完成时，承诺得到了解决（在第二个动画完成之前完成了这样做）。

你只需要为第二个动画使用另一个承诺，并为它们两者使用。这有什么不同之处：

var deferred1 = $.Deferred(),
    deferred2 = $.Deferred();
$('.block1').animate({
    'marginLeft': '200px', 'width': '400px'
}, 2000, function () {
    deferred1.resolve();
});

$('.block2').animate({
    'marginLeft': '0px', 'height': '400px'
}, 4500, function () {
    deferred2.resolve();
});

return deferred1.promise()
    .then(function () { 
        return deferred2.promise();
    });

唯一的主要区别是我在等待这两个承诺。

LE：正如Thayne所做的那样，你也可以使用

$.when(deferred1, deferred2);

JQuery承诺面临的问题

2 个答案: