javascript - 如何将 when() 与多个 deferred 一起使用以使效果非并发运行？

Question

我正在编写一些简单的 UI 代码以在按下按钮时重新排列布局。

我有一个包含三个表单字段的搜索栏、一个“搜索”按钮、一些文本和一个 Logo 。在按下“搜索”时，按钮、 Logo 和文本淡出，带有文本字段的栏使用 jquery.animate() 滑动到页面顶部， Logo 和搜索按钮被赋予不同的 CSS重新定位它们，然后淡入新位置。

我正在尝试使用这个 JQuery documentation 来使用 deferred.done()

我从下面开始:

var fades = function () {
    $("#centerSearchText").fadeOut();
    $("#headerImage").fadeOut();
    $("#searchButton").fadeOut();
}

$.when( fades() ).done(function () {
    var positionUpdate = function() { 
        $("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" });
        $("#searchButton").appendTo("#search_input_table tr:first")
        $("#header").animate({
            top: "0px",
            marginTop: "0px",
        }, 500);
    }

    $.when(cssUpdate()).done(function () {
        $("#headerImage").fadeIn();
        $("#searchButton").fadeIn();
    });

});

...这不起作用，因为每个函数都在同时运行。我意识到我没有正确地按照示例返回延迟对象，如下面的链接示例所示:

var effect = function() {
    return $( "div" ).fadeIn( 800 ).delay( 1200 ).fadeOut();
};

但是我需要在三个 fadeOuts() 完成时返回，而不是只有一个。所以我将代码更新为以下内容:

var fades = function () {
    return $.when($("#centerSearchText").fadeOut(), $("#headerImage").fadeOut(), $("#searchbtn").fadeOut()).done()
}

$.when( fades() ).done(function () {
    var cssUpdate = function() { 
        return $.when($("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" }),
                    $("#searchbtn").appendTo("#search_input_table tr:first"),
                    $("#header").animate({
                        top: "0px",
                        marginTop: "0px",
                    }, 500)).done(); 
    }
    $.when(cssUpdate()).done(function () {
        $("#headerImage").fadeIn();
        $("#searchbtn").fadeIn();
    });

});

...其中 UI 元素不再同时运行它们的效果，因为在初始淡出之后没有到达任何代码。

谁能告诉我我在这里做错了什么？我确定我在某处误解了 when() 和 done() 的使用，但我一直没能找到关于使用多个 deferred 的很好的文档与我的代码进行比较的对象。

Answer 1

你可以使用延迟:

var deferred1 = $.Deferred();
var deferred2 = $.Deferred();
var deferred3 = $.Deferred();

$("#centerSearchText").fadeOut(1000, function() { deferred1.resolve(); } );
$("#headerImage").fadeOut(1000, function() { deferred2.resolve(); } );
$("#searchButton").fadeOut(1000, function() { deferred3.resolve(); } );


$.when(deferred1, deferred2, deferred3).done(function() {

    return when($("#headerImage").css({ "left": "12px", "margin-left": "12px", "margin-top": "12px", "float": "left" }),
                $("#searchbtn").appendTo("#search_input_table tr:first"),
                $("#header").animate({
                    top: "0px",
                    marginTop: "0px",
                }, 500)).done(); 
}
$.when(cssUpdate()).done(function () {
    $("#headerImage").fadeIn();
    $("#searchbtn").fadeIn();

});

http://api.jquery.com/category/deferred-object/