JQuery 承诺面临的问题答案

【问题标题】：Issue facing with JQuery promiseJQuery 承诺面临的问题
【发布时间】：2016-02-02 05:44:30
【问题描述】：

我想在一个函数中的两个动画都执行后触发一个函数。因此我选择了 jquery promise。但是 .done 函数会在“.block1”的第一个动画完成后立即触发，它不会等待“.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;    
    }

【问题讨论】：

我认为它的工作检查jsfiddle.net/BDhara/to6df3h5 ..done() 在动画完成后执行
你想在第二个 div 动画完成后提示信息吗？

标签： javascript jquery

【解决方案1】：

一个Promise在resolve被调用一次后就被解析，如果你想等待两个事件，你需要创建两个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);
}

【讨论】：

【解决方案2】：

我稍微修改了你的代码，现在它可以工作了：https://jsfiddle.net/bys2gbt1/

发生的情况是您只对两个动画使用了 1 个 promise。当最快的动画完成时，承诺就解决了（所以在第二个动画完成之前调用了 done）。

您只需要对第二个动画和方式使用另一个承诺。以下是不同之处：

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

【讨论】：