Problemi i callback hell në JavaScript

Le të supozojmë se duam të ngarkojmë tre imazhe duke përdorur funksionin 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);
});

Ka diçka që nuk shkon me këtë kod. Çështja është që imazhet do të shtohen në body ndërsa ngarkohen. Kjo do të thotë se askush nuk na garanton që imazhet do të shtohen pikërisht në atë rend që ne dëshirojmë.

Ka edhe diçka tjetër. Le të supozojmë se duam të bëjmë diçka kur të tre imazhet të jenë ngarkuar. Në kodin tonë thjesht nuk do të jemi në gjendje të kapim këtë moment, pasi të tre imazhet ngarkohen në mënyrë të pavarur.

Në rregull, le të rishkruajmë kodin:

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('të gjitha imazhet janë ngarkuar');
		});
	});
});

Ne i zgjidhëm të dy problemet e përshkruara. Megjithatë, në këmbim kemi marrë një tjetër. Tani për tani ende nuk duket shumë, por imagjinone se si do të dukej kodi ynë nëse do të kishte ngarkim jo të tre, por, le të themi, dhjetë imazhesh, plus do të shtohej menaxhimi i përjashtimeve. Si rezultat, kodi do të bëhej jashtëzakonisht i pa lexueshëm: kompleksiteti i kodit rritet në mënyrë shpërbëhese me mbivendosjen e callback-ëve. Kjo situatë quhet callback hell - ferr i callback-ëve.

Rishkruani kodin e dhënë në mënyrë që në të të ketë ngarkim të 10 imazheve plus menaxhim të përjashtimeve. Sigurohuni që ju përfundoni në një situatë callback hell.