jquery - 仅当多个事物已完全执行时才执行某些事物

Question

假设我只想在一件事情完全执行后才执行某件事，我会执行以下操作:

$('#content-1').fadeIn(function() {
   $("menue").slideUp();
});

但是，如果只有在具有不同操作的多个事物已完全执行后才应执行某些事物，该怎么办？像这样:

$('#content-1').fadeIn();
$('#content-2').fadeOut();
function() {
    $("menue").slideUp();
}

如何在不单独和重复的情况下执行此操作？

Answer 1

您将使用回调:

$('#content-1').fadeIn(500, function() {
    $('#content-2').fadeOut(500, function() {
        $("menue").slideUp();
    });
});

或者，如果多个事件需要同时发生:

var content1_complete = false;
var content2_complete = false;
var callback = function() {
    $("menue").slideUp();
}
$('#content-1').fadeIn(500, function() {
    content1_complete = true;
    if (content1_complete && content2_complete) {
        callback();
    }
}
$('#content-2').fadeIn(500, function() {
    content2_complete = true;
    if (content1_complete && content2_complete) {
        callback();
    }
}

但请注意，如果事件花费相同的时间，它们也应该同时完成，在这种情况下，不需要这样的标志。