确定嵌套的 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（例如，显示加载图标），直到用户的现有挑战最初完成加载。否则，用户界面往往会在 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);
    });
  });
};

我还会进行一些错误处理以在出现错误时关闭加载程序。