JavaScriptにおけるコールバック地獄の問題

関数 <loadImage を使って3枚の画像をロードしたいとします。

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

このコードには少し問題があります。問題は、画像がロードされるにつれて body に追加されることです。つまり、画像が必要な順序で追加されることを誰も保証してくれません。

もう一つあります。3枚すべての画像がロードされたときに何かをしたいとします。このコードでは、3枚すべての画像が独立してロードされるため、その瞬間を捉えることが単純にできません。

では、コードを書き直しましょう：

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('すべての画像がロードされました');
		});
	});
});

私たちは説明した両方の問題を解決しました。しかし、代わりに別の問題を抱えてしまいました。まだそれほど目立ちませんが、コードが3枚ではなく、例えば10枚の画像のロードと、例外処理の追加を含む場合、コードがどのように見えるか想像してみてください。結果として、コードは極めて読みにくくなります：コールバックを互いにネストすると、コードの複雑さが雪だるま式に増大するのです。この状況は callback hell（コールバック地獄）と呼ばれます。

提示されたコードを、10枚の画像のロードと例外処理を含むように書き直してください。コールバック地獄の状況が発生することを確認してください。