javascript - 隐藏几个div，只有全部隐藏后，再运行回调函数

Question

我需要将 .panel 类的所有 div 隐藏在一个容器 div 中。然后在所有隐藏之后，有选择地取消隐藏一些 .panel div。我尝试在 hide() 上使用回调，但回调会针对隐藏的每个元素运行。在某些情况下，由于相同的 div 被一遍又一遍地隐藏和显示，我最终会陷入几乎无限或长时间的循环。

这不起作用，因为第二个元素在隐藏完成之前显示:

$("#detailsPanel").children(".panel").hide();
$("#membershipPanel").slideDown();
$("#specializationsPanel").slideDown();

如果我将这些步骤嵌套在回调中的隐藏之后，回调将针对隐藏的每个 .panel div 运行。

---

完整代码

如果这有助于找到我逻辑中的缺陷，这是我的完整功能。

function goWizard(step) {
    switch (step) {
        case 0:
            $("#formPanel").hide();
            $("#beginPanel").slideDown();
            $("#instructionsPanel").slideDown().children().slideDown();
            $("#loginPanel").slideDown().children().slideDown();
            break;
        case 1:
            $("#beginPanel").hide().children().hide();
            $("#stepTitle").text("Membership Category/Specialist Category :: Step 1 of 8");
            $("html, body").animate({ scrollTop: 0 }, "slow");
            $("#summaryPanel").slideDown().children().show();
            $("#formPanel").slideDown();

            var i = 0;
            var $panels = $("#detailsPanel").children(".panel");
            $panels.hide(function () {
                i++;
                if (i == $panels.length) {
                    $("#membershipPanel").show();
                    $("#specializationsPanel").show();
                }
            });

            $("#startOverButton").show();
            $("#prevStepButton").hide();
            $("#nextStepButton").show();
            $("#startOverButton").click(function () { goWizard(0); });
            $("#nextStepButton").click(function () { goWizard(2); });
            break;
        case 2:
            $("#beginPanel").hide().children().hide();
            $("#stepTitle").text("Section Membership :: Step 2 of 8");
            $("html, body").animate({ scrollTop: 0 }, "slow");
            $("#summaryPanel").slideDown().children().show();
            $("#formPanel").slideDown();

            var i = 0;
            var $panels = $("#detailsPanel").children(".panel");
            $panels.hide(function () {
                i++;
                if (i == $panels.length) {
                    $("#sectionsPanel").show();
                }
            });

            $("#startOverButton").hide();
            $("#prevStepButton").show();
            $("#nextStepButton").show();
            $("#prevStepButton").click(function () { goWizard(1); });
            $("#nextStepButton").click(function () { goWizard(3); });
            break;
        case 3:
            $("#beginPanel").hide().children().hide();
            $("#stepTitle").text("Insurance Compliance :: Step 3 of 8");
            $("html, body").animate({ scrollTop: 0 }, "slow");
            $("#summaryPanel").slideDown().children().show();
            $("#formPanel").slideDown();

            var i = 0;
            var $panels = $("#detailsPanel").children(".panel");
            $panels.hide(function () {
                i++;
                if (i == $panels.length) {
                    $("#insurancePanel").show();
                }
            });

            $("#startOverButton").hide();
            $("#prevStepButton").show();
            $("#nextStepButton").show();
            $("#prevStepButton").click(function () { goWizard(2); });
            $("#nextStepButton").click(function () { goWizard(4); });
            break;
        default:
            $("#beginPanel").slideDown();
            $("#formPanel").hide();
            break;
    }
}

Answer 1

我会使用 promise :

$.when(
    $("#detailsPanel").children(".panel").hide().promise(),
    $("#membershipPanel").slideDown().promise(),
    $("#specializationsPanel").slideDown().promise()
).done(function() {
    console.log('all done');
});

示例:https://jsfiddle.net/jjh65h2y/