Callback hell -ongelman JavaScriptissä

Oletetaan, että haluamme ladata kolme kuvaa loadImage -funktion avulla:

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

Tässä koodissa on jotain vialla. Asia on siinä, että kuvat lisätään body:hen niiden latautumisen mukana. Eli kukaan ei takaa meille, että kuvat lisätään juuri siihen järjestykseen, jota tarvitsemme.

On vielä jotain. Oletetaan, että haluamme tehdä jotain, kun kaikki kolme kuvaa on ladattu. Nykyisessä koodissamme emme yksinkertaisesti pysty saamaan tätä hetkeä kiinni, koska kaikki kolme kuvaa ladattain itsenäisesti.

Okei, muutetaan koodia:

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('kaikki kuvat ladattu');
		});
	});
});

Ratkaisimme molemmat kuvatut ongelmat. Kuitenkin, saimme vaihdoksi toisen. Se ei vielä ole voimakkaasti näkyvissä, mutta kuvittele miltä koodimme näyttäisi, jos siinä olisi ei kolmen, vaan vaikkapa kymmenen kuvan lataus, plus poikkeusten käsittely. Tuloksena koodista tulee erittäin lukukelvoton: koodin monimutkaisuus kasvaa lumivyörymäisesti takaisinkutsujen sisäkkäisyyden myötä. Tätä tilannetta kutsutaan callback hell:ksi - takaisinkutsupuhelma.

Kirjoita annettu koodi uudelleen siten, että siinä on 10 kuvan lataus plus poikkeusten käsittely. Varmista, että saat aikaan callback hell -tilanteen.