javascript - JQuery Promise 面临的问题

Question

我想在执行函数内的动画后触发函数。因此我选择了jquery Promise。但是，一旦“.block1”的第一个动画完成，.done 函数就会被触发，它不会等待“.block2”的动画。

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 就会被解析，如果你想等待两个事件，你需要创建两个 Promise 并等待它们，例如:

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);
}