当我知道所有异步调用都已完成时，如何运行回调？

Question

I am making an application using Three.js, to create a textual geometry and add it to the scene, I pass a function. However, I can do this several times and I have created a method that iterates over all meshes in the scene and performs some visual changes. My Question is, how can I know when all async calls have completed and I know all meshes have been added to the scene, such that when I call my method and iterate over all meshes in the scene, all meshes have been successfully added?

eg

/* Create the scene Text */
let loader = new THREE.FontLoader();
loader.load('fonts/helvetiker_regular.typeface.json', font => {
    /* Create the geometry */
    let geometry_text = new THREE.TextGeometry("example text");

    /* Currently using basic material because I do not have a light, Phong will be black */
    let material_text = new THREE.MeshBasicMaterial();

    let textMesh = new THREE.Mesh(geometry_text, material_text);
    scene.add(textMesh);  // <---------- Adds the mesh to the scene

});

fade_meshes_into_scene();      // <------- iterates over all meshes in scene.

In this example, It will not work since fade_meshes_into_scene iterates over all meshes in the scene and in this case the scene will have no meshes because it's called before scene.add(textMesh) is called. However, I can move it inside the async call when I only do it once, but will fail to work when I add multiple text and different async calls.

How can I know when I have added all of my meshes so I know when to call fade_meshes_into_scene ?

Answer 1

I recommend you turn your font loading into Promises. You can then use Promise.all to guarantee that all promises in an array have resolved before executing the function you pass to then ..

const loadFont = fontPath => {
  return new Promise(res => {
    loader.load(fontPath, font => {
      // do loading things
      scene.add(textMesh);
      res();
    });
  });
}

const font1 = loadFont('font-path-1.json'); // Promise for first font
const font2 = loadFont('font-path-2.json'); // Promise for second font

Promise.all([font1, font2]).then(() => {
  fade_meshes_into_scene();  
})