Проблема callback hell во JavaScript

Да претпоставиме дека сакаме да вчитаме три слики со функцијата 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);
});

Со овој код нешто не е во ред. Работата е во тоа дека сликите ќе се додаваат во body како што се вчитуваат. Односно, никој не ни гарантира дека сликите ќе се додадат токму во редоследот што ни е потребен.

Има уште нешто. Да претпоставиме дека сакаме да направиме нешто кога сите три слики ќе се вчитаат. Во нашиот код едноставно нема да можеме да го фатиме овој момент, бидејќи сите три слики се вчитуваат независно.

Во ред, да го преработиме кодот:

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('сите слики се вчитани');
		});
	});
});

Ги решивме опишаните проблеми. Сепак, за возврат добивме друг. Сеуште не е многу видлива, но замислете како ќе изгледа нашиот код ако во него има вчитување не на три, туку, да речеме, десет слики, плус додадена обработка на исклучоци. Како резултат, кодот ќе стане екстремно нечитлив: комплексноста на кодот лавинообразно расте со вгнездувањето на колбековите еден во друг. Таквата ситуација се нарекува callback hell - пекол на колбекови.

Препишете го дадениот код така што во него ќе има вчитување на 10 слики плус обработка на исклучоци. Уверете се дека добивате ситуација на callback hell.