В настоящее время я делаю сценарий 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'>
— «ИМЯ ПОЛЬЗОВАТЕЛЯ», и оно будет обновлено с помощью «имени пользователя», полученного из сценария.). Я попытался разместить файлы JS поверх страницы с тем же результатом.
Мой вопрос будет заключаться в том, есть ли способ заставить этот скрипт запускать ПЕРВЫЙ до загрузки страницы? Или есть более эффективный способ справиться с этим скриптом?
🤔 А знаете ли вы, что...
JavaScript позволяет создавать динамические и интерактивные веб-приложения.
Теоретически запрос сработает (асинхронно) до загрузки DOM, если вы поместите скрипт в тег head. Однако вы не знаете, сколько времени потребуется, прежде чем запрос будет выполнен. Может даже провалиться.
Мое предложение состояло бы в том, чтобы дать клиенту какую-то обратную связь о том, что информация загружается (т.е. показать индикатор прогресса). Есть бесчисленное множество статей, написанных о том, как вы можете подойти к этому.
Помните, что вам не нужно показывать какой-либо контент до того, как информация будет получена. Это полностью зависит от вас.
Вы смешиваете асинхронные и синхронизирующие функции... Я не знаю вашей архитектуры, но предполагая, что у вас есть только эта страница, просто оберните встроенный скрипт, и он должен работать без 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>
проблема с этим подходом заключается в том, что ваша страница не будет загружаться до тех пор, пока обещание не будет разрешено, и это может занять много времени (и также не удастся), что не очень хорошо для вашего взаимодействия с пользователем. Как уже упоминалось, у вас есть разные способы решения этой проблемы, один из них — Веб-работник.