Il problema del callback hell in JavaScript

Supponiamo di voler caricare tre immagini utilizzando la funzione 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);
});

C'è qualcosa che non va in questo codice. Il fatto è che le immagini verranno aggiunte al body man mano che vengono caricate. Ciò significa che nessuno ci garantisce che le immagini verranno aggiunte esattamente nell'ordine che desideriamo.

C'è dell'altro. Supponiamo di voler fare qualcosa quando tutte e tre le immagini saranno caricate. Nel nostro codice semplicemente non potremmo cogliere questo momento, poiché tutte e tre le immagini si caricano indipendentemente.

Ok, modifichiamo il codice:

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('tutte le immagini sono state caricate');
		});
	});
});

Abbiamo risolto entrambi i problemi descritti. Tuttavia, in cambio ne abbiamo ottenuto un altro. Per ora non è ancora molto evidente, ma immaginate come apparirebbe il nostro codice se prevedesse il caricamento non di tre, ma, diciamo, dieci immagini, più l'aggiunta della gestione delle eccezioni. Di conseguenza, il codice diventerebbe estremamente illeggibile: la complessità del codice cresce in modo esponenziale con l'annidamento delle callback l'una dentro l'altra. Questa situazione è chiamata callback hell - inferno delle callback.

Riscrivete il codice fornito in modo che preveda il caricamento di 10 immagini più la gestione delle eccezioni. Verificate che otteniate una situazione di callback hell.