jquery - jquery在另一个函数启动之前等待一个函数运行

Question

我有一个这样的功能设置：

function sixth_screen_intro() {
    current_slide = 7;
    fifth_screen_outro();

    $("#voting-txt").animate({
        top: "50%",
        marginTop:-80
    },500);
}

这里是 Fifth_screen_outro() 供参考，但作为说明，我想将它们分开：

function fifth_screen_outro() {
    $("#budget-txt").animate({
        left:600
    },500);
    coin_hop();
    $("#piggy_bank").animate({
        marginTop:-190,
        left:50
    },70, function() {
        $("#piggy_bank").animate({
            marginTop:-141,
            left:0
        },70, function () {
            coin_hop_delay();
            $("#piggy_bank").delay(400).animate({
                marginTop:-190,
                left:-50
            },70, function () {
                $("#piggy_bank").animate({
                    marginTop:-141,
                    left:-100
                },70, function () {
                    coin_hop_delay();
                    $("#piggy_bank").delay(400).animate({
                        marginTop:-190,
                        left:-150
                    },70, function () {
                        $("#piggy_bank").animate({
                            marginTop:-141,
                            left:-200
                        },70, function () {
                            coin_hop_delay();
                            $("#piggy_bank").delay(400).animate({
                                marginTop:-190,
                                left:-250
                            },70, function () {
                                $("#piggy_bank").animate({
                                    marginTop:-141,
                                    left:-300
                                },70, function () {
                                    coin_hop_delay();
                                    $("#piggy_bank").delay(400).animate({
                                        marginTop:-190,
                                        left:-350
                                    },70, function () {
                                        $("#piggy_bank").animate({
                                            marginTop:-141,
                                            left:-400
                                        },70);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
}

Six_screen_intro() 只需单击即可调用。有没有办法让voting-txt动画不播放，直到fifth_screen_outro（）完成执行？也许某种回调？

Answer 1

摆脱所有嵌套的东西，并使用您可以调用的函数：

function fifth_screen_outro(callback) {
    var i = 0, l = 0;

    $("#budget-txt").animate({
        left:600
    },500);
    coin_hop();
    ani(-141, 10);

    function ani(val, times) {
        var s = val == -190;
        if (s) coin_hop_delay();
        $("#piggy_bank").delay(s ? 400 : 0).animate({
            marginTop: val,
            left: l
        },70, function() {
            if (i >= times) {
                callback();
            }else{
                l += 50;
                i++;
                ani(s ? -141 : -190, times);
            }
        });
    }
}

小提琴

Answer 2

您可以使用超时功能，以便在一段时间后调用 $("#voting-txt").animate ，或者您可以使用完整的 jquery 来实现此目的。

超时很简单，将解决您的问题

setTimeout(function() {
        $("#voting-txt").animate(){}
    }, 1000);

如果您的 first() 函数正在异步执行某些操作（例如发出 Ajax 请求），那么您需要让 second() 作为该异步请求的回调，而不是让它在 first() 返回后立即执行。

Answer 3

您还可以使用deferred：

function sixth_screen_intro() {
    current_slide = 7;
    fifth_screen_outro().done(function() {
        $("#voting-txt").animate({
            top: "50%",
            marginTop:-80
        },500);
    });
}

function fifth_screen_outro() {
    var def = $.Deferred();
    $("#budget-txt").animate({
        left:600
    },500);
    coin_hop();
    $("#piggy_bank").animate({
        marginTop:-190,
        left:50
    //...
                                    },70, function () {
                                        $("#piggy_bank").animate({
                                            marginTop:-141,
                                            left:-400
                                        },70, function() {
                                           def.resolve(true);
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });
    return def.promise();
}