Problem callback hell v JavaScriptu

Recimo, da želimo s funkcijo loadImage naložiti tri slike:

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);
});

S to kodo nekaj ni v redu. Bistvo je v tem, da bodo slike dodane v body tekom njihovega nalaganja. To pomeni, da nihče ne zagotavlja nam, da bodo slike dodane ravno v vrstnem redu, ki ga potrebujemo.

Obstaja še nekaj. Recimo, da želimo narediti nekaj, ko bodo vse tri slike naložene. V naši kodi preprosto ne moremo ujeti tega trenutka, ker se vse tri slike nalagajo neodvisno.

V redu, preoblikujmo kodo:

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('vse slike so naložene');
		});
	});
});

Rešili smo oba opisana problema. Vendar smo v zameno dobili drugega. Za zdaj še ni močno viden, vendar si predstavljajte, kako bo izgledala naša koda, če bo v njej nalaganje ne treh, ampak recimo desetih slik, plus dodana obdelava izjem. Kot rezultat bo koda postala izjemno neberljiva: kompleksnost kode se lavino podobno povečuje z gnezdenjem callback funkcij. Takšna situacija se imenuje callback hell - pekel callback funkcij.

Prepišite navedeno kodo tako, da bo v njej nalaganje 10 slik plus obdelava izjem. Prepričajte se, da dobite situacijo callback hell.