Javascript JQuery承诺面临的问题

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

HTML:

CSS:

---

只要对承诺调用一次

resolve

，承诺就会被解析，如果要等待两个事件，则需要创建两个承诺并同时等待，例如：

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

---

只要对承诺调用一次

resolve

，承诺就会被解析，如果要等待两个事件，则需要创建两个承诺并同时等待，例如：

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

---

我对您的代码做了一些更改，现在它可以工作了：

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

您只需要为第二个动画使用另一个承诺，并为它们两者使用另一种方式。以下是不同之处：

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

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

乐：正如塞恩所做的，你也可以使用

$.when(deferred1, deferred2);

---

我对您的代码做了一些更改，现在它可以工作了：

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

您只需要为第二个动画使用另一个承诺，并为它们两者使用另一种方式。以下是不同之处：

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

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

乐：正如塞恩所做的，你也可以使用

$.when(deferred1, deferred2);

---

我想它的工作检查..完成（）在动画完成后执行你想在第二个div动画完成后发出警报消息吗？我想它的工作检查..完成（）在动画完成后执行你想在第二个div动画完成后发出警报消息吗？