Het probleem van callback hell in JavaScript

Stel we willen met de functie loadImage drie afbeeldingen laden:

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

Er is iets mis met deze code. Het punt is, dat de afbeeldingen in body worden toegevoegd naarmate ze laden. Dat betekent dat niemand garandeert dat de afbeeldingen precies in de volgorde worden toegevoegd die wij nodig hebben.

Er is nog iets. Stel we willen iets doen wanneer alle drie de afbeeldingen zijn geladen. In onze code kunnen we dit moment simpelweg niet vangen, omdat alle drie de afbeeldingen onafhankelijk van elkaar laden.

Oké, laten we de code aanpassen:

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('alle afbeeldingen zijn geladen');
		});
	});
});

We hebben beide beschreven problemen opgelost. Echter, hebben we er een andere voor in de plaats gekregen. Het is nu nog niet erg zichtbaar, maar stel je voor hoe onze code eruit zou zien als we niet drie, maar bijvoorbeeld tien afbeeldingen zouden laden, plus uitzonderingsafhandeling zouden toevoegen. Uiteindelijk wordt de code extreem onleesbaar: de complexiteit van de code groeit als een lawine bij het nesten van callbacks in elkaar. Zo'n situatie wordt callback hell genoemd - callback hel.

Herschrijf de gegeven code zodat er 10 afbeeldingen worden geladen plus uitzonderingsafhandeling. Zorg dat je de callback hell-situatie krijgt.