Question

我尝试使用THREE.XHRLoader加载多个文件，当它完成时，我想获取该对象的密钥并将其与文件一起添加到另一个对象（loadedFiles）。我遇到的问题是，每当我尝试检索已加载对象的密钥时，它总是返回对象数组中的最后一个密钥，因为在循环结束后调用load函数的回调。

我有这样的事情：

var loader = new THREE.XHRLoader();
var loaded = 0;

for (var k in filesToLoad) {
    loader.load(filesToLoad[k], function(file) {
        console.log(k); // This will always return the last key when I want 
//it to the return the key that was loaded instead!

        loadedFiles[k] = file;

        loaded++;

        if (loaded == Object.keys(filesToLoad).length) {
            console.log(loadedFiles);
        }
    });
}

Answer 1

您可以将THREE来电包裹在承诺中，然后使用Promise.all解决所有问题。（伪代码）

let promises = Object.keys(filesToLoad)
  .map(k => {
    return new Promise((res, rej) => {
        loader.load(filesToLoad[k], res, rej); //Assuming loader has success, error callbacks
    });
  });

Promise.all(promises)
    .then(res => console.log(res)); // [file, file, file...]

显然，取决于您的浏览器支持取决于ES6，但您可以使用ES5兼容的promise库。

注意创建每个promise时，将并行加载所有文件。这些请求在进入Promise.all

之前已经处于待处理状态

Promise.all

循环遍历javascript对象，同时在其中运行异步调用

1 个答案: