javascript - 功能之间的延迟

Question

这是我的代码片段。

    function customFadeIn () {
    $("img.imgKit").each(function(index) {
        $(this).delay(1000*index).fadeIn("slow");
    });
    console.log("one runs");
}

function customFadeOut () {
    $("img.imgKit").each(function(index) {
        $(this).delay(1000*index).not(document.getElementById('card-6')).fadeOut("slow" , function () {
            $("#card-6").delay(1000).rotate({angle:0});
        });
    });
    console.log("two runs");
}

我希望 customFadeOut 仅在 customFadeIn 完成后运行，因此我这样调用它

customFadeIn();
customFadeOut();

但它没有用，我想我在这里做错了什么，帮助真的很有帮助。

Answer 1

您可以使用 jQuerys Deferred/promise 对象。动画也会“继承”这些对象，您可以应用 jQuery.when() 来完成多个 promise 。

有几种方法可以为此重构代码，一个简单的实现如下所示:

(function() {
    var promises = [ ];

    function customFadeIn () {
        $("img.imgKit").each(function(index) {
             promises.push( $(this).delay(1000*index).fadeIn("slow").promise() );
        });
    }

    function customFadeOut () {
        jQuery.when.apply( null, promises ).done(function() {
            $("img.imgKit").each(function(index) {
                $(this).delay(1000*index).not(document.getElementById('card-6')).fadeOut("slow" , function () {
                    $("#card-6").delay(1000).rotate({angle:0});
                });
            });
            console.log("two runs");
        });
    }
}());

如果我在那里做的一切都正确，customFadeOut 会设置一个监听器，等待所有动画/promises 完成，然后再运行它的自己的代码。您甚至不必在最后显式调用 .promise() 方法，jQuery 会应用一些白魔法在内部为您将该节点与 promise 链接起来。

演示:http://jsfiddle.net/RGgr3/

---

看起来我做的一切都是正确的;)