Callback hell-problemet i JavaScript

Låt oss säga att vi vill ladda tre bilder med 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);
});

Det är något fel med den här koden. Saken är den att bilderna kommer att läggas till i body i takt med att de laddas. Det vill säga, ingen garanterar för oss att bilderna kommer att läggas till just i den ordning vi behöver.

Det finns något annat också. Låt oss säga att vi vill göra någonting när alla tre bilderna har laddats. I vår kod kommer vi helt enkelt inte att kunna fånga det här ögonblicket, eftersom alla tre bilderna laddas oberoende av varandra.

Okej, låt oss ändra 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('alla bilder är laddade');
		});
	});
});

Vi löste båda de beskrivna problemen. Men fick ett annat problem i utbyte. Ännu är det inte så tydligt synligt, men föreställ dig hur vår kod kommer att se ut om den innehåller laddning av inte tre, utan, låt oss säga, tio bilder, plus att felhantering läggs till. Som ett resultat kommer koden att bli extremt oläsbar: kodens komplexitet ökar lavinartat vid nästling av callbacks inuti varandra. Denna situation kallas callback hell - callback-helvetet.

Skriv om den givna koden så att den inkluderar laddning av 10 bilder plus felhantering. Övertyga dig själv om att du får en callback hell-situation.