javascript - Babylonjs typescript 竞争条件？

Question

我一直在尝试babylonjs，到目前为止一切都很棒。当所有内容都位于同一文件中的 ImportMesh 回调函数中时，我能够加载网格体并为它们设置动画。然而;当我尝试将事情分开并做如下简单的事情时，我似乎得到了这些竞争条件。举个例子:

var models = ["brick_wall", "tree1", "person1"]

for (var i =0;i<models.length;++i) {


    BABYLON.SceneLoader.ImportMesh(models[i], "models/","tree.babylon", scene, (newMeshes) => {


        this.meshMap[models[i]] = newMeshes[0]
        console.log("mesh set:" + models[i])
    });
}

控制台日志打印为“网格集:未定义”。我假设是因为导入网格在“i”有机会被设置之前就在自己的线程中执行回调函数？然而，当我在回调中简单地进行控制台打印时，我很难理解如何仍然无法设置“i”和/或模型列表。当我进行控制台打印时:

models[1] 

在同一个回调中，我能够正确地看到该值吗？毫无意义:(

有谁知道导入网格在线程方面发生了什么？ Babylonjs 是否有等待线程的最佳实践？我尝试使用 scene.executewhenready 但我似乎仍然无法在回调之外的变量中存储和检索任何内容。

Answer 1

I'm assuming because import mesh executes the callback function in its own thread before "i" has even had a chance to be set

没有。请注意，JavaScript(大部分......并且在本例中肯定是)单线程。

When I do a console print of: models[1] within the same callback

这是因为在这种情况下，变量i将指向分配的最后值(models.length)。

注意:JavaScript 闭包捕获变量而不是值。因此，您需要在每次循环迭代中创建一个新变量。

固定代码

var models = ["brick_wall", "tree1", "person1"]

for (var i =0;i<models.length;++i) {

(function(index){
    var i = index;
    BABYLON.SceneLoader.ImportMesh(models[i], "models/","tree.babylon", scene, (newMeshes) => {


        this.meshMap[models[i]] = newMeshes[0]
        console.log("mesh set:" + models[i])
    });
})(i);

}

这是演示这一原理的视频:https://www.youtube.com/watch?v=hU4cbxpe49Y