Tatizo la Callback Hell katika JavaScript

Tuseme tunataka kwa kutumia kitendakazi loadImage kupakia picha tatu:

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

Kuna kitu kibaya na msimbo huu. Jambo ni kwamba picha zitaongezwa kwenye body kadiri zinavyopakika. Hiyo ni, hakuna anayetuhakikishia kwamba picha zitaongezwa haswa katika mpangilio ambao tunahitaji.

Kuna jambo lingine. Tuseme tunataka kufanya kitu fulani, pale zitakapopakwa picha zote tatu. Katika msimbo wetu hatuwezi hata kukamata wakati huu, kwa sababu picha zote tatu zinapakika kwa kujitegemea.

Sawa, wacha tubadilishe msimbo:

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('picha zote zimepakika');
		});
	});
});

Tumetatua matatizo yote mawili yaliyoelezwa. Hata hivyo, tumepata lingine badala yake. Kwa sasa, haionekani sana, lakini fikiria jinsi msimbo wetu utakavyoonekana, ikiwa hautakuwa na upakiaji wa picha tatu tu, bali, tuseme, picha 10, pamoja na usindikaji wa isipokuwa. Hatimaye msimbo utakuwa usosomeka kabisa: utata wa msimbo unaongezeka kwa kasi wakati vitendo vya wito wa nyuma vinapolaliana. Hali kama hii inaitwa callback hell - kuzimu ya vitendo vya wito wa nyuma.

Andika upya msimbo ulio hapo juu ili ndani yake iwe na upakiaji wa picha 10 pamoja na usindikaji wa isipokuwa. Hakikisha unapata hali ya callback hell.