Question

我正在努力应对jQuery的承诺和动画。这是一个简化的案例：

var title = $('#intro h2');
title.fadeOut(2000).promise()
    .then(function () { title.fadeIn(4000); } )
    .then(function () { title.css( {'background-color':'red'} ); } );

我希望标题（$('#intro h2')）淡出，然后淡入，然后将其背景颜色变为红色。相反，在标题淡入之前，背景会变为红色。

发生了什么事？

如何使用promises来确保正确的事件顺序？

Answer 1

您的then回调不会返回承诺，因此承诺链不知道该等待什么。它不会等待undefined。使用

title.fadeOut(2000).promise().then(function(){
    return title.fadeIn(4000).promise();
//  ^^^^^^                   ^^^^^^^^^^
}).then(function() {
    title.css({'background-color':'red'})
})

请注意，此动画也可以单独使用动画队列完成：

title.fadeOut(2000).fadeIn(4000, function(){title.css('background-color','red')})

Answer 2

您需要从第一个then()回调中返回淡入动画的承诺。

否则，承诺链没有任何等待的东西，所以立即执行。

title.fadeOut(2000).promise()
    .then(function () { return title.fadeIn(4000).promise(); })
    .then(function () { title.css( {'background-color':'red'} ); });

链式jQuery承诺尽早执行

2 个答案: