Problema callback hell în JavaScript

Să presupunem că vrem să încărcăm trei imagini folosind funcția loadImage:

loadImage('img1.png', function(image, err) {
	document.body.append(image);
});
loadImage('img2.png', function(image, err) {
	document.body.append(image);
});
loadImage('img3.png', function(image, err) {
	document.body.append(image);
});

Ceva nu este în regulă cu acest cod. Problema este că imaginile vor fi adăugate în body pe măsură ce sunt încărcate. Adică nimeni nu ne garantează că imaginile vor fi adăugate exact în ordinea de care avem nevoie.

Mai este ceva. Să presupunem că vrem să facem ceva atunci când toate cele trei imagini sunt încărcate. În codul nostru pur și simplu nu vom putea prinde acest moment, deoarece toate cele trei imagini se încarcă independent.

Bine, să refacem codul:

loadImage('img1.png', function(image1, err1) {
	document.body.append(image1);
	
	loadImage('img2.png', function(image2, err2) {
		document.body.append(image2);
		
		loadImage('img3.png', function(image3, err3) {
			document.body.append(image3);
			console.log('toate imaginile sunt încărcate');
		});
	});
});

Am rezolvat ambele probleme descrise. Cu toate acestea, am obținut în schimb altceva. Problema nu este încă puternic vizibilă, dar imaginați-vă cum va arăta codul nostru dacă va conține încărcarea nu a trei, ci, să zicem, a zece imagini, plus va fi adăugată prelucrarea excepțiilor. În rezultat, codul va deveni extrem de greu de citit: complexitatea codului crește în mod avalanșiu la imbricarea callback-urilor unul în altul. Această situație se numește callback hell - iadul callback-urilor.

Rescrieți codul dat astfel încât în el să fie încărcarea a 10 imagini plus prelucrarea excepțiilor. Asigurați-vă că obțineți situația callback hell.