Le problème du callback hell en JavaScript

Supposons que nous voulions charger trois images à l'aide de la fonction 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);
});

Il y a un problème avec ce code. Le fait est que les images seront ajoutées au body au fur et à mesure de leur chargement. C'est-à-dire que rien ne nous garantit que les images seront ajoutées précisément dans l'ordre dont nous avons besoin.

Il y a autre chose. Supposons que nous voulions faire quelque chose une fois que les trois images seront chargées. Avec notre code, nous ne pourrons simplement pas saisir ce moment, car les trois images se chargent indépendamment.

Ok, refaisons le code :

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('toutes les images sont chargées');
		});
	});
});

Nous avons résolu les deux problèmes décrits. Cependant, nous en avons obtenu un autre en échange. Pour l'instant, il n'est pas encore très visible, mais imaginez à quoi ressemblera notre code s'il charge non pas trois, mais, disons, dix images, et si on ajoute la gestion des exceptions. En conséquence, le code deviendra extrêmement illisible : la complexité du code augmente de manière exponentielle avec l'imbrication des callbacks les uns dans les autres. Cette situation est appelée callback hell - l'enfer des callbacks.

Réécrivez le code donné afin qu'il charge 10 images plus la gestion des exceptions. Assurez-vous que vous obtenez une situation de callback hell.