Asynkron bildladdning i loop i JavaScript

Låt sökvägarna till bilderna lagras i en array:

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

Vi kan ladda dessa bilder i en loop:

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

Koden blev vacker och utan callback hell, men vi är tillbaka till våra två problem: ordningen på bilderna är inte garanterad och det är omöjligt att fånga ögonblicket när alla bilder har laddats.

Och det finns ingen lösning i denna situation: det är omöjligt att starta en loop, använda en asynkron funktion inuti den, och sedan fånga ögonblicket när alla funktioner i loopen är klara. Antingen behöver du inte fånga det ögonblicket och koden ovan kommer att passa dig, eller så är du välkommen till callback hell.

Men du bör inte bli upprörd - en lösning på problemet är möjlig genom promises, som vi kommer att studera i de följande lektionerna.