JQuery承诺面临的问题

Issue facing with JQuery promise

本文关键字：问题 承诺 JQuery      更新时间：2023-09-26

我想在执行函数中的两个动画后触发一个函数。因此，我选择了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;    
    }
一旦

调用一次 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);
}

我稍微更改了您的代码，现在它正在工作：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);
相关文章：