Callback hell problema JavaScript'e

Tarkime, kad norime naudodami funkciją loadImage įkelti tris paveikslėlius:

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);
});

Su šiuo kodu yra tam tikra problema. Esmė ta, kad paveikslėliai bus pridedami prie body pačiu jų įkėlimo metu. Tai yra, niekas mums negarantuoja, kad paveikslėliai bus pridėti būtent ta tvarka, kuri mums reikalinga.

Yra dar vienas dalykas. Tarkime, kad norime padaryti kažką, kai bus įkelti visi trys paveikslėliai. Mūsų kode mes tiesiog negalėsime pagauti šio momento, nes visi trys paveikslėliai įkeliami nepriklausomai.

Gerai, perrašykime kodą:

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('visi paveikslėliai įkelti');
		});
	});
});

Išsprendėme abi aprašytas problemas. Tačiau, gavome kitą problemą mainais. Kol kas ji dar nelabai matoma, bet įsivaizduokite, kaip atrodys mūsų kodas, jeigu jame bus ne trijų, o, tarkime, dešimties paveikslėlių įkėlimas, plius bus pridėta išimčių apdorojimas. Dėl to kodas taps itin neįskaitomas: kodo sudėtingumas staigiai auga įdedant atgalinio iškvietimo funkcijas vieną į kitą. Tokia situacija vadinama callback hell - atgalinio iškvietimo pragaras.

Perrašykite pateiktą kodą taip, kad jame būtų 10 paveikslėlių įkėlimas plius išimčių apdorojimas. Įsitikinkite, kad gaunate callback hell situaciją.