Încărcarea asincronă a imaginilor într-o buclă în JavaScript

Să presupunem că căile către imagini sunt stocate într-un array:

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

Putem încărca aceste imagini într-o buclă:

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

Codul a ieșit frumos și fără callback hell, cu toate acestea, ne-am întors la cele două probleme ale noastre: ordinea imaginilor nu este garantată și este imposibil să detectăm momentul încărcării tuturor imaginilor.

Și nu există o soluție în această situație: este imposibil să rulezi o buclă, să folosești în interiorul ei o funcție asincronă, și apoi să prinzi momentul în care toate funcțiile din buclă s-au finalizat. Fie că nu ai nevoie să prinzi acest moment și codul de mai sus ți se potrivește, fie că ești binevenit în callback hell.

Dar, nu trebuie să te descurajezi - soluția la problemă este posibilă prin promisiuni, pe care le vom studia în lecțiile următoare.