Question

我目前正在制作一个JavaScript脚本，该脚本可从实时数据库中获取用户的数据

/* Fetch User Data from Firebase */

function userInfo() {
    var username;
    var usertype;
    var barangay;

    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var userId = firebase.auth().currentUser.uid;
        return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
        username = (snapshot.val() && snapshot.val().name) || 'Unknown';
        barangay = (snapshot.val() && snapshot.val().barangay) || 'Unknown';

        document.getElementById('fullname').innerHTML = username; //Sets the username in the Webpage. 
        });
      } else {
        window.location.replace("../index.html"); //redirect
      }
    });
  }
  window.onload = userInfo();

window.onload = userInfo();是我当前用来使脚本在页面加载时触发的代码，但这会导致更新innerHTML中的数据的延迟。 （例如：<p id='fullname'>的内容为“ USERNAME”，并将使用从脚本中获取的“用户名”进行更新。）。我尝试将JS文件放在页面顶部，结果相同。

我的问题是，在页面加载之前，有什么方法可以使该脚本启动 FIRST ？还是有一种更有效的方式来处理此脚本？

Answer 1

理论上，如果将脚本放在head标签中，则请求将在异步加载DOM之前触发。但是，您不知道请求完成之前需要花费多长时间。甚至可能失败。

我的建议是向客户提供某种信息正在加载的反馈（即显示进度指示器）。关于如何实现此目标的文章不计其数。

请记住，检索信息之前不必显示任何内容。这完全取决于您。

Answer 2

您正在混合使用异步和同步功能...我不知道您的体系结构，但是假设您只有此页面，只需包装一个内联脚本，它应该可以工作，而无需window.onload

<script>
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        var userId = firebase.auth().currentUser.uid;
        return firebase.database().ref('/users/' + userId).once('value').then(function(snapshot) {
        username = (snapshot.val() && snapshot.val().name) || 'Unknown';
        barangay = (snapshot.val() && snapshot.val().barangay) || 'Unknown';

        document.getElementById('fullname').innerHTML = username; //Sets the username in the Webpage. 
        });
      } else {
        window.location.replace("../index.html"); //redirect
      }
    });
</script>

这种方法的问题是，您的页面要等到诺言解决后才能加载，这可能会花费很长时间（并且也会失败），这不利于您的用户体验。如前所述，您有不同的方法来解决此问题，其中一种是Web Worker

Firebase / JS-在加载页面之前触发JavaScript？

2 个答案: