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

Question

我正在使用 Three.js 创建一个应用程序，以创建文本几何并将其添加到场景中，我传递了 function。 但是，我可以多次执行此操作，并且我创建了一个迭代场景中所有网格并执行一些视觉更改的方法。 我的问题是，我怎么知道所有异步调用何时完成并且我知道所有网格都已添加到场景中，这样当我调用我的方法并迭代场景中的所有网格时，所有网格都已成功添加？

例如

/* 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.

在这个例子中，它不起作用，因为fade_meshes_into_scene迭代场景中的所有网格，在这种情况下，场景将没有网格，因为它是在调用scene.add(textMesh)之前调用的。 但是，当我只执行一次时，我可以将它移动到异步调用中，但是当我添加多个文本和不同的异步调用时将无法工作。

我如何知道何时添加了所有网格，以便知道何时调用fade_meshes_into_scene ？

Answer 1

我建议您将字体加载转换为 Promises。 然后，您可以使用Promise.all来保证数组中的所有承诺在执行您传递给then的 function 之前都已解决。

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();  
})