जावास्क्रिप्ट में कॉलबैक हेल की समस्या

मान लीजिए कि हम फ़ंक्शन का उपयोग करके 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);
});

इस कोड में कुछ गड़बड़ है। बात यह है कि छवियाँ body में जोड़ दी जाएंगी जैसे-जैसे वे लोड होती हैं। यानी कोई हमें गारंटी नहीं देता कि छवियाँ जोड़ी जाएंगी उसी क्रम में जो हमें चाहिए।

और भी कुछ है। मान लीजिए कि हम कुछ करना चाहते हैं जब सभी तीनों छवियाँ लोड हो जाएंगी। हमारे कोड में हम बस नहीं कर पाएंगे इस क्षण को पकड़ना, क्योंकि सभी तीन छवियाँ स्वतंत्र रूप से लोड होती हैं।

ठीक है, कोड को फिर से बनाते हैं:

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('सभी छवियाँ लोड हो गई हैं');
		});
	});
});

हमने वर्णित दोनों समस्याओं को हल कर दिया। हालाँकि, बदले में हमें एक और समस्या मिली। अभी तक यह बहुत ज़्यादा नहीं दिख रही है, लेकिन कल्पना करें कि हमारा कोड कैसा दिखेगा यदि इसमें तीन नहीं, बल्कि, मान लीजिए, दस छवियों को लोड करना हो, और साथ ही अपवादों का प्रसंस्करण भी जोड़ा जाए। परिणामस्वरूप कोड बन जाएगा अत्यधिक अपठनीय: कोड की जटिलता हिमस्खलन की तरह बढ़ती है जब कॉलबैक एक दूसरे में नेस्टेड होते हैं। ऐसी स्थिति को callback hell कहा जाता है - कॉलबैक का नरक।

दिए गए कोड को इस तरह फिर से लिखें कि इसमें 10 छवियों को लोड करना शामिल हो और साथ ही अपवादों का प्रसंस्करण भी हो। सुनिश्चित करें कि आपको कॉलबैक हेल की स्थिति का सामना करना पड़ रहा है।