javascript - jquery - 仅在异步调用完成后显示 div

Question

在我的页面上，有两个 Divs A 和 B。

Div B 默认隐藏。

Div A 只包含一个按钮。单击它时，我希望A 隐藏并显示B。

但是 div B 的内容包含一些被异步 REST 调用淹没的数据。

所以我希望 B 仅在其所有内容准备就绪时显示。

HTML:

<div id="A">
    <button id="button1">Click here</button>
</div>
<div id="B"></div>

JS代码

//Approach 1 I tried:
$(document).ready(function() {
    $("#B").hide();  // Div B hidden by default
    $("#button1").click(function () {
        $.when (
            renderChildPage()
        ).done (
            $("#B").show()
        )
    });
});

function renderChildPage() {
    // 1. some async calls
    // 2. fill some elements in Div B.
}

但上面的代码无法正常工作，因为 Div B 中的一些元素得到了显示，而另一些则没有。

//Approach 2 I tried:
$(document).ready(function() {
    $("#B").hide(); // Div B hidden by default
    $("#button1").click(function (){
        $("#B").show();
        renderChildPage;        // Code even working without it.
    });
});


var renderChildPage = (function () {
    // 1. some async calls
    // 2. fill some elements in Div B.
})();

这种方法有效，但即使我不调用 renderChildPage()，该函数仍会被调用并显示 div B 中的内容。

有人可以建议正确的方法吗？

同样在方法 2 中，为什么代码在没有调用的情况下被执行。

谢谢

Answer 1

您的做法是正确的。 done 接受回调并在 when 完成时执行。

$(document).ready(function() {
    $("#B").hide();  // Div B hidden by default
    $("#button1").click(function () {
        $.when (
            renderChildPage();
        ).done (function(){
            $("#B").show()
          }
        )
    });
});