JavaScript හි callback hell ගැටලුව

අපි ශ්‍රිතය භාවිතා කරමින් රුප තුනක් පූරණය කිරීමට අවශ්‍ය යැයි සිතමු 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('රූප සියල්ල පූරණය විය');
		});
	});
});

අපි විස්තර කළ ගැටලු දෙකම විසඳා ගත්තෙමු. කෙසේ වෙතත්, ඒ වෙනුවට තවත් ගැටලුවක් ලැබුණි. එය තවමත් බලයෙන් යුක්ත නැත දෘශ්‍යමාන වුවද, අපගේ කේතය පෙනෙන ආකාරය සිතන්න , රූප තුනක් නොව එහි පූරණයක් ඇති විට, උදාහරණයක් ලෙස, රූප දහයක්, සහ එකතු කර ඇත ව්‍යතිරේක ආචරණය. ප්‍රතිඵලයක් වශයෙන් කේතය බවට පත් වේ අතිශයින්ම කියවිය නොහැකි: කේතයේ සංකීර්ණතාව හිමිකාරිත්වයෙන් callbacks එකිනෙක ඇතුල් වන විට වර්ධනය වේ. එවැනි තත්වයක් callback hell ලෙස හැඳින්වේ - callbacks එක්කස්.

ඉදිරිපත් කර ඇති කේතය නැවත ලියන්න එවිට එහි 10 රූප පූරණය කිරීම සහ ආචරණය ව්‍යතිරේක.