JavaScript-এ কলব্যাক হেল সমস্যা

ধরুন আমরা ফাংশন ব্যবহার করে 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টি ছবি লোডিং প্লাস এক্সেপশন হ্যান্ডলিং থাকে। নিশ্চিত হন যে আপনার কাছে কলব্যাক হেল পরিস্থিতি তৈরি হচ্ছে।