Проблема 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.