Firebaseからのデータの取得と表示には時間がかかります

Question

Firebaseデータベースからpidの値を読み取り、このpid値を使用して、データベースからさらに値を取得しています。

//fetching pid 
firebaseRef.once("value") 
    .then(function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
     //getting key of the child 
     var pid = childSnapshot.key; 
     // childData will be the actual contents of the child 
     var childData = childSnapshot.val(); 
     pid[i].id = "pid" + (i + 1); 
     document.getElementById(pids[i].id).innerText = pid; 
     i++; 
    }); 
    }); 

//displaying marks 
var pid1 = document.getElementById("pid1").innerHTML; 
guideRef = firebase.database().ref("internal").child(pid1).child("guide"); 
guideRef.child("report").once('value').then(function(snapshot) { 
    document.getElementById(reportGuideMarks).value = snapshot.val(); 
}); 

しかし、このコードを走っ私はこのエラーを取得する：

Uncaught Error: Firebase.child failed: First argument was an invalid path: "". Paths must be non-empty strings and can't contain ".", "#", "$", "[", or "]"

PIDエラーがnullであることPID1する予定です。しかし、マークを表示する部分に3秒の遅れを入れると、コードは完全に実行されます。

pidの値が設定される前でも表示マークが実行されます。

テーブル内のpidの値を設定するのに数秒かかります。

問題点は何ですか？なぜデータベースの値をロードするのに時間がかかるのですか？それとも、値を設定することに問題がありますか？ firebaseへ

Answer 1

要求はそれほど「マークを表示する」コードがコードが完了しました「フェッチPID」の前に実行されます非同期です。

あなたは最初の部分は

//fetching pid 
firebaseRef.once("value") 
    .then(function(snapshot) { 
    snapshot.forEach(function(childSnapshot) { 
     //getting key of the child 
     var pid = childSnapshot.key; 
     // childData will be the actual contents of the child 
     var childData = childSnapshot.val(); 
     pid[i].id = "pid" + (i + 1); 
     document.getElementById(pids[i].id).innerText = pid; 
     i++; 
    }); 
    }) 
    // new then() won't fire until prior then() is completed 
    .then(function() {  
    //displaying marks 
    var pid1 = document.getElementById("pid1").innerHTML; 
    guideRef = firebase.database().ref("internal").child(pid1).child("guide"); 
    guideRef.child("report").once('value').then(function(snapshot) { 
     document.getElementById(reportGuideMarks).value = snapshot.val(); 
    }); 

    })