Problém callback hell v JavaScripte

Predpokladajme, že chceme pomocou funkcie loadImage načítať tri obrázky:

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 týmto kódom je niečo nesprávne. Vec sa má tak, že obrázky budú pridané do body podľa toho, ako sa načítajú. To znamená, že nikto nám negarantuje, že obrázky budú pridané práve v tom poradí, ktoré potrebujeme.

Je tu ešte niečo. Predpokladajme, že chceme urobiť niečo, keď budú načítané všetky tri obrázky. V našom kóde jednoducho nevieme zachytiť tento moment, pretože všetky tri obrázky sa načítavajú nezávisle.

Dobre, prepíšme kód:

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('všetky obrázky sú načítané');
		});
	});
});

Vyriešili sme oba popísané problémy. Avšak, získali sme za to iný. Zatiaľ ešte nie je veľmi viditeľný, ale predstavte si, ako bude vyzerať náš kód, ak v ňom bude načítanie nie troch, ale povedzme desiatich obrázkov, plus bude pridané spracovanie výnimiek. Výsledkom bude, že kód sa stane extrémne nečitateľným: zložitosť kódu lavínovite narastá pri vnorení callback funkcií do seba. Takáto situácia sa nazýva callback hell - peklo callbackov.

Prepíšte uvedený kód tak, aby v ňom bolo načítanie 10 obrázkov plus spracovanie výnimiek. Presvedčte sa, že vám vznikne situácia callback hell.