jquery - 与 jquery 同步排列多个效果

Question

是否有更易读的方式来对同步执行的一些异步效果进行排队？

var element1 = $('#div1');
var element2 = $('#div2');

$(element2).hide();
$(element1).on('click',function(){   
    $(element1).fadeOut(1000,function(){
        $(element2).fadeIn(1000, function(){
            $(element2).hide();
            alert('hello');
        });
    });
}); 

Answer 1

如果您使用基于承诺的系统，您可以防止更深的嵌套效应。

$.when(
    $(element1).fadeOut(1000)
).then(function () {
    return $(element2).fadeIn(1000);
}).then(function () {
    return $(element2).hide();
}).then(function () {
    return $(element1).fadeIn(1000);
}).then(function () {
    return $(element1).fadeOut(1000);
});

演示：http: //jsfiddle.net/tYhNq/1

您会注意到这使得更改动画的顺序变得非常容易。

“技巧”是该$.when()方法返回与第一个动画关联的承诺对象，因此您可以链接一堆.then()调用，注意每个then()回调应该返回其动画的结果。

当然，您可以直接在同一元素上链接动画，例如.fadeIn(100).fadeOut(100)...

Answer 2

这个问题被称为“回调地狱”。在 NodeJS 中，您可以使用异步模块选项来“逃避”它。

我没有在 jQuery 中找到通讯选项。

我的建议是为每种效果创建一个函数，如下所示：

var element1 = $('#div1');
var element2 = $('#div2');

$(element2).hide();

var finished = function () { console.log(":-)"); }
var hide = function () { element2.hide(); finished(); }
var fadeIn = function () { element2.fadeIn(1000, hide); }
var clicked = function () { element1.fadeOut(1000, fadeIn); }

$(element1).on('click', clicked);

JSFIDDLE