JavaScript'te Callback Hell Sorunu

Diyelim ki loadImage fonksiyonuyla üç resim yüklemek istiyoruz:

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

Bu kodla ilgili bir sorun var. Sorun şu ki, resimler yüklendikçe body'ye eklenecekler. Yani, resimlerin tam olarak ihtiyacımız olan sırada ekleneceğinin garantisi yok.

Bir şey daha var. Diyelim ki üç resim de yüklendiğinde bir şey yapmak istiyoruz. Mevcut kodumuzda bu anı yakalayamayız, çünkü üç resim de bağımsız olarak yükleniyor.

Tamam, kodu yeniden düzenleyelim:

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('tüm resimler yüklendi');
		});
	});
});

Açıklanan her iki sorunu da çözdük. Ancak, karşılığında başka bir sorun elde ettik. Henüz çok görünür değil ama, on değil de, diyelim on resmin yüklendiği, artı istisna işleme eklendiği bir kodun nasıl görüneceğini hayal edin. Sonuç olarak kod son derece okunaksız hale gelecek: callback'ler iç içe geçtiğinde kod karmaşıklığı çığ gibi büyür. Bu duruma callback hell - callback cehennemi denir.

Verilen kodu, 10 resim yükleme ve istisna işleme içerecek şekilde yeniden yazın. Bir callback hell durumu oluştuğunu gözlemleyin.