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