Problem callback hell-a u JavaScript-u

Pretpostavimo da želimo da pomoću funkcije loadImage učitamo tri slike:

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

Sa ovim kodom nešto nije u redu. Stvar je u tome, da će slike biti dodavane u body kako se budu učitavale. To znači da nam niko ne garantuje da će slike biti dodate baš u onom redosledu koji nama odgovara.

Postoji još nešto. Pretpostavimo da želimo da uradimo nešto, kada se sve tri slike učitaju. U našem kodu mi jednostavno nećemo moći da uhvatimo taj trenutak, pošto su sve tri slike učitavane nezavisno.

Okej, prekucajmo 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('sve slike su učitane');
		});
	});
});

Rešili smo oba opísana problema. Međutim, dobili smo zauzvrat drugi. Za sada još nije naročito vidljiv, ali zamislite kako bi izgledao naš kod, ako bi u njemu bilo učitavanje ne tri, već, recimo, deset slika, plus bi bila dodata obrada izuzetaka. Kao rezultat, kod bi postao izuzetno nečitljiv: složenost koda lavinoidno raste pri ugnježđavanju callback-a jedan u drugi. Ovakva situacija se naziva callback hell - pakao callback-a.

Prepišite dat kod tako da u njemu bude učitavanje 10 slika plus obrada izuzetaka. Uverite se da dobijate situaciju callback hell-a.