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() method返回与第一个动画关联的promise对象，因此您可以链接一堆.then()个调用，注意每个then()回调应该返回动画的结果。

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

Answer 2

此问题称为“callback hell”。在NodeJS中，您有async模块选项可以“逃避”它。

我没有在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

与jquery同步排队一些效果

2 个答案: