javascript - jQuery 延迟 - 当多个超时任务完成时

Question

在 $.deferred 上遇到一些初期问题, $.when和$.done .

我正在调用一个方法，该方法在计时器上有几个任务。我正在考虑当该方法内的所有内容都完成时(包括计时器中的内容)获得回调，因此开始查看 $.when()和$.done()来实现这一目标。

我遇到的问题是该函数在任务完成之前立即触发，并在调用该方法时立即触发。所以，我开始玩$.deferred和resolve() ，但还没有设法让任何事情发挥作用。没有计时器，我也能做到。

这是我调用该方法的地方:

$.when(cover.start()).done(function() {
    console.log("Cover has started.");
});

这是整个方法:

return {

    other: function() {},

    start: function() {
        var dfd = $.Deferred();
        el.filter.animate({
            "opacity": "0.6", "filter": "alpha(opacity=60)"
        }, 2000, "easeInOutCirc", function() {
            el.share.removeClass('fa-spin');

            setTimeout(function() {
                el.share.removeClass('fa-cog').addClass('fa-bars');
            },1000);

            setTimeout(function() {
                el.scroll.animate({
                    "opacity": "1",
                    "bottom": "40px"
                }, 1200, "easeOutBounce", function() {
                    var pulseOptions = { opacity: "0" };
                    setTimeout(function() {
                        el.scroll.pulse(pulseOptions, {
                            duration : 400,
                            pulses: 3,
                            interval: 500,
                            returnDelay: 800
                        });
                    }, 2000);
                    dfd.resolve();
                });
            }, 2000);

            return dfd.promise();

        });
    }

} // end return

如您所见，在我最初的尝试失败后，我添加了 dfd.resolve()到我想要回调并尝试返回 promise 的地方。然而，该函数仍然触发得太早。我哪里出错了？

Answer 1

问题是，你需要从start方法返回promise

return {

    other: function () {},

    start: function () {
        var dfd = $.Deferred();
        el.filter.animate({
            "opacity": "0.6",
                "filter": "alpha(opacity=60)"
        }, 2000, "easeInOutCirc", function () {
            el.share.removeClass('fa-spin');

            setTimeout(function () {
                el.share.removeClass('fa-cog').addClass('fa-bars');
            }, 1000);

            setTimeout(function () {
                el.scroll.animate({
                    "opacity": "1",
                        "bottom": "40px"
                }, 1200, "easeOutBounce", function () {
                    var pulseOptions = {
                        opacity: "0"
                    };
                    setTimeout(function () {
                        el.scroll.pulse(pulseOptions, {
                            duration: 400,
                            pulses: 3,
                            interval: 500,
                            returnDelay: 800
                        });
                    }, 2000);
                    dfd.resolve();
                });
            }, 2000);


        });
        //need to return from start
        return dfd.promise();
    }

} // end return