javascript - 等到异步操作 (firebase) 调用完成后再加载页面

Question

我正在尝试执行一个异步操作，该操作将获取数据并影响我的网页样式。

有没有办法让这个操作在页面加载之前完成？由于我想更改 div 元素的实际属性，我知道这不太可能，但我想让你们知道如何实现这一点。

也许通过将数据存储在浏览器 session 中或其他方式，以便它只需要考虑一个？我不确定

var grab_user = new Firebase("https://<FIREBASE>.firebaseio.com/users/"+auth.uid);
//grab data from firebase
grab_user.once('value', function (dataSnapshot) {
    var $user = dataSnapshot.val();

    //if the user has this object,
    //change the head color to whats in their settings
    if($user.whitelabel)
        $("#top-header").css('background-color', $user.whitelabel.color);
});

Answer 1

没有。在 Firebase(以及现代网络的几乎任何其他部分)中加载数据是异步的，您必须在代码中处理它。

如果您的 div 在数据可用之前无法正确呈现，您应该仅在从 Firebase 加载数据后将其添加到(或显示在)页面上。

因此，让您的 header 隐藏在 CSS 中(#top-header: { display: none })，然后将您的代码更改为:

var grab_user = new Firebase("https://<FIREBASE>.firebaseio.com/users/"+auth.uid);
//grab data from firebase
grab_user.once('value', function (dataSnapshot) {
    var $user = dataSnapshot.val();

    //if the user has this object,
    //change the head color to whats in their settings
    if($user.whitelabel) {
        $("#top-header").css('background-color', $user.whitelabel.color);
        $("#top-header").show(); // now we're ready to show the header
    }
});

如果在页眉具有背景颜色之前整个页面应该隐藏，您还可以在 CSS 中将 body 标记为隐藏，然后在数据显示时显示 that可用。