Callback hell'i probleem JavaScriptis

Oletame, et tahame funktsiooni loadImage abil laadida kolm pilti:

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

Selle koodiga on midagi valesti. Asi on selles, et pildid lisatakse body sisse vastavalt nende laadimise järjekorrale. See tähendab, et keegi ei garanteeri meile, et pildid lisatakse just sellises järjekorras, millist me vajame.

On veel midagi. Oletame, et tahame teha midagi, kui kõik kolm pilti on laaditud. Meie praeguses koodis me lihtsalt ei suuda seda hetke kinni püüda, kuna kõik kolm pilti laadivad sisse sõltumatult.

Okei, muudame koodi:

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('kõik pildid on laaditud');
		});
	});
});

Me lahendasime mõlemad kirjeldatud probleemid. Kuid saanime vastutasuks teise. See pole veel tugevalt näha, kuid kujutage ette, kuidas meie kood välja näeb, kui selles on mitte kolme, vaid näiteks kümne pildi laadimine, pluss on lisatud erandite töötlemine. Selle tulemusena muutub kood äärmiselt loetamatuks: koodi keerukus lumepallina kasvab callback'ide üksteise sisse pesastumisel. Sellist olukorda nimetatakse callback hell - callback'ide põrgu.

Kirjutage toodud kood ümber nii, et selles oleks 10 pildi laadimine pluss erandite töötlemine. Veenduge, et te saavutate callback hell'i olukorra.