A callback hell problémája a JavaScript-ben

Tegyük fel, hogy a loadImage függvénnyel három képet szeretnénk betölteni:

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

Ezzel a kóddal valami nem stimmel. Az a helyzet, hogy a képek a body-be kerülnek be betöltésük sorrendjében. Vagyis senki sem garantálja számunkra, hogy a képek éppen a számunkra szükséges sorrendben kerülnek be.

Van még valami. Tegyük fel, hogy szeretnénk tenni valamit, amikor mind a három kép betöltődött. A jelenlegi kódunkban ezt a pillanatot egyszerűen nem tudjuk megfogni, mivel mind a három kép függetlenül töltődik be.

Oké, alakítsuk át a kódot:

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('minden kép betöltődött');
		});
	});
});

Megoldottuk mindkét leírt problémát. Azonban cserébe egy másikat kaptunk. Még nem nagyon nyilvánvaló, de képzeljük el, hogyan fog kinézni a kódunk, ha nem három, hanem mondjuk tíz kép betöltését tartalmazza, plusz legyen hozzáadva a kivételek kezelése. Ennek eredményeképpen a kód rendkívül olvashatatlanná válik: a kód komplexitása lavinaszerűen nő a visszahívások egymásba ágyazásakor. Ezt a helyzetet callback hell-nek - visszahívási pokolnak - hívják.

Írja át az adott kódot úgy, hogy az 10 kép betöltését tartalmazza plusz a kivételek kezelését. Győződjön meg róla, hogy callback hell helyzet alakul ki.