Asynchrones Laden von Bildern in einer Schleife in JavaScript

Lassen Sie die Pfade zu den Bildern in einem Array gespeichert sein:

let arr = ['img1.png', 'img2.png', 'img3.png'];

Wir können diese Bilder in einer Schleife laden:

for (let path of arr) {
	loadImage(path, function(image, err) {
		document.body.append(image);
	});
}

Der Code ist schön geworden und ohne Callback-Hell, allerdings sind wir zu unseren beiden Problemen zurückgekehrt: Die Reihenfolge der Bilder ist nicht garantiert und es ist unmöglich, den Moment des Ladens aller Bilder abzufangen.

Und es gibt keine Lösung in dieser Situation: Es ist unmöglich, eine Schleife zu starten, darin eine asynchrone Funktion zu verwenden, und dann den Moment des Abschlusses aller Funktionen der Schleife abzufangen. Entweder Sie müssen diesen Moment nicht abfangen und der obige Code ist für Sie geeignet, oder willkommen in der Callback-Hell.

Aber seien Sie nicht traurig - eine Lösung des Problems ist durch Promises möglich, die wir in den folgenden Lektionen behandeln werden.