Problemet med callback helvede i JavaScript

Lad os sige, at vi vil indlæse tre billeder ved hjælp af funktionen 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);
});

Der er noget galt med denne kode. Sagt faktisk, at billederne vil blive tilføjet til body efhåndsom som de indlæses. Det betyder, at ingen garanterer os, at billederne vil blive tilføjet netop i den rækkefølge, vi har brug for.

Der er noget andet. Lad os sige, at vi vil gøre noget, når alle tre billeder er indlæst. I vores kode vil vi simpelthen ikke kunne fange dette øjeblik, fordi alle tre billeder indlæses uafhængigt.

Okay, lad os omskrive koden:

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 billeder er indlæst');
		});
	});
});

Vi løste begge de beskrevne problemer. Men vi fik et andet problem til gengæld. Lige nu er det ikke særligt synligt endnu, men forestil dig, hvordan vores kode vil se ud, hvis der ikke var indlæsning af tre, men for eksempel ti billeder, plus at der blev tilføjet fejlhåndtering. Som et resultat vil koden blive yderst ulæselig: kodekompleksiteten vokser i et lavine-lignende tempo ved indlejring af callbacks ind i hinanden. Denne situation kaldes callback hell - callback helvede.

Omskriv den viste kode, så den indlæser 10 billeder plus fejlhåndtering. Overbevis dig selv om, at du ender ud i en callback helvede-situation.