在内部运行异步调用时循环遍历 javascript 对象

【问题标题】：Loop over javascript object whilst running async calls within在内部运行异步调用时循环遍历 javascript 对象
【发布时间】：2016-05-25 06:39:57
【问题描述】：

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

我有这样的东西：

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

【问题讨论】：

标签： javascript loops asynchronous three.js

【解决方案1】：

您可以将您的THREE 调用包装在一个promise 中，然后使用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

【讨论】：