Question

用户注册后，主页就会加载（student-home.handlebars）；

如果导航到消息页面，则我在更新编译上设置了超时，因为我必须等待Firebase加载消息中。

但是，此SetTimeout会导致一个错误：我注册后，就会呈现主页，并在一秒钟内（在1000ms的setTimeout之后）自动导航到student-messages.handlebars。

只有在设置了timeOut的情况下才会发生这种情况，但实际上是不可能的，因为student-home.handlebars不会从student-messsages.handlebars中读取任何代码。

是否有另一种方法可以以较小的延迟加载消息视图，以便显示消息？或解释为何此setTimeout会导致此问题？

  import {
      getInstance
    } from '../firebase/firebase';
    const firebase = getInstance();

const studentMessagesViewTemplate = require('../templates/student-messages.handlebars');
        export default () => {



    const database = firebase.database();
    const ref = 
    database.ref('messages/').orderByChild('receiver').equalTo(currentUserKey);

        ref.on("value", function (snap) {
          snap.forEach(function (childSnapshot) {
            let data = childSnapshot.val();
            if (data.receiver === currentUserKey) {
              Message = {
                content: data.content,
                sender: data.senderName,
                senderKey: data.senderKey,
                receiver: currentUserKey,
                date: data.date
              }
            }
            messageList.push(Message);
            // console.log(messageList);
          });
        });

        setTimeout(() => {
              // Return the compiled template to the router
              update(compile(studentMessagesViewTemplate)({
                messageList
              }));
              let messageDetail = document.querySelectorAll('.messages-list');
              for (let i = 0; i < messageDetail.length; i++) {
                messageDetail[i].id = "messageDetail" + i;
                messageDetail[i].addEventListener('click', showDetail);
              };
              // firebase logout at buttonclick
              const btnLogout = document.querySelector('.btnLogout');
              btnLogout.addEventListener('click', e => {
                firebase.auth().signOut().then(function () {
                  window.location.replace('#/');
                });
              });
            }, 1000);
    }

Answer 1

setTimeout()仅是您要在某个时间之后运行某些内容时的正确解决方案。在这里，您要在数据加载后运行代码，这不是一个确定的时间（实际上，在大多数情况下这是非常不确定的）。

要在数据加载后运行其他代码，请将其移至Firebase在数据加载后调用的回调中（或从中调用）。像这样：

    ref.on("value", function (snap) {
      snap.forEach(function (childSnapshot) {
        let data = childSnapshot.val();
        if (data.receiver === currentUserKey) {
          Message = {
            content: data.content,
            sender: data.senderName,
            senderKey: data.senderKey,
            receiver: currentUserKey,
            date: data.date
          }
        }
        messageList.push(Message);
        // console.log(messageList);
      });
      // Return the compiled template to the router
      update(compile(studentMessagesViewTemplate)({
        messageList
      }));
      let messageDetail = document.querySelectorAll('.messages-list');
      for (let i = 0; i < messageDetail.length; i++) {
        messageDetail[i].id = "messageDetail" + i;
        messageDetail[i].addEventListener('click', showDetail);
      };
      // firebase logout at buttonclick
      const btnLogout = document.querySelector('.btnLogout');
      btnLogout.addEventListener('click', e => {
        firebase.auth().signOut().then(function () {
          window.location.replace('#/');
        });
      });
    });

setTimeout导致注册或登录后页面加载错误

1 个答案: