Schleife über Javascript-Objekt während Async-Aufrufe innerhalb

Question

Ich versuche, mehrere Dateien mit dem THREE.XHRLoader zu laden, und wenn es abgeschlossen ist, möchte ich den Schlüssel des Objekts nehmen und es zusammen mit der Datei zu einem anderen Objekt (loadedFiles). Das Problem, das ich habe, ist, dass, immer wenn ich versuche, den Schlüssel für das geladene Objekt abzurufen, immer den letzten Schlüssel im Objekt-Array zurückgibt, weil der Rückruf für die Ladefunktion aufgerufen wird, nachdem die Schleife beendet wurde.

Ich habe so etwas wie dieses bekam:

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

Sie könnten Ihre THREE Anrufe in ein Versprechen wickeln dann Promise.all alle zu lösen benutzen, wenn sie haben. (Pseudocode)

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...] 

Offensichtlich je nach verwendetem Browser-Unterstützung ist abhängig von ES6 aber es gibt ES5 kompatibel Versprechen Bibliotheken, die Sie stattdessen verwenden können.

Beachten Sie, dass alle Ihre Dateien parallel geladen werden, wenn jedes Versprechen erstellt wird. Die Anforderungen sind bereits anstehend, bevor sie in Promise.all

Promise.all

gehen