确定嵌套的firebase数据库ref.on调用何时完成

Question

我有数据库设计(粗略)如下：

"users": {
  "userId1": {
    "challenges" {
     "challengeId1"=true,
     "challengeId2"=true
    }
  }, 
  "userId2": {
    "challenges" {
     "challengeId1"=true,
     "challengeId3"=true
    }
  }
  ...
  "userIdN": {...}
}          
"challenges": {
  "challengeId1": {
     "title"="Title 1
    }
  },
  "challengeId2": {
     "title"="Title 2
    }
  },
  "challengeId3": {
     "title"="Title 3
    }
  }
}

在我的客户端中，我进行了以下嵌套调用：

const fetchChallengeList = (currUser) => {
  firebase.database().ref(`/users/${currUser.uid}/challenges`).on('child_added', snapshot => {
    firebase.database().ref(`/challenges/${snapshot.key}`).on('value', snapshotChall => {
      // Dispatch some stuff to UI
    });
  });
};

这通常效果很好，并保持一切同步。使用.on可确保每次添加新质询(到user:challenges)或修改现有质询时，firebase都会更新UI。

问题出在初始加载上。理想情况下，我希望等待更新UI (例如，显示加载图标)，直到用户的现有挑战最初完成加载。否则，UI会在5-10秒的过程中感觉到抖动和膨胀。因为所有的调用都是异步的，并且保持打开状态，所以我不知道初始集合何时完成加载。有没有办法跟踪这件事？

Answer 1

我将创建一个方法来显示/隐藏加载程序，如下所示

toggleLoader(display) => {
  // dont know the framework you are using 
  if (display) {
     $('.loader').show();
  } else {       
     $('.loader').hide();
  } 
}

然后，可以在加载质询后调用此方法

const fetchChallengeList = (currUser) => {
  firebase.database().ref(`/users/${currUser.uid}/challenges`).on('child_added', snapshot => {
    firebase.database().ref(`/challenges/${snapshot.key}`).on('value', snapshotChall => {
      // Dispatch some stuff to UI
      toggleLoader(false);
    });
  });
};

我还会放入一些错误处理，以便在出现错误时关闭加载器。