JavaScript ရှိ Callback Hell ပြဿနာ

function 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('ပုံအားလုံးဖွင့်ပြီးပါပြီ');
		});
	});
});

ဖော်ပြပါပြဿနာ (၂) ခုကို ကျွန်ုပ်တို့ ဖြေရှင်းနိုင်ခဲ့ပါပြီ။ သို့သော် အစားထိုးပြဿနာတစ်ခုကို ရရှိခဲ့ပါတယ်။ ယခုထိ မထင်ရှားသေးသော်လည်း ပုံ (၃) ပုံမဟုတ်ဘဲ ဆယ်ပုံလောက်ဖွင့်ရမည့်ကုဒ်၊ ထို့အပြင် error handling ပါထည့်ရမည့်ကုဒ် ဆိုလျှင် ကျွန်ုပ်တို့၏ကုဒ်သည် မည်သို့ပုံစံဖြစ်သွားမည်ကို စဉ်းစားကြည့်ပါ။ ရလဒ်အနေဖြင့် ကုဒ်သည် အလွန်ဖတ်ရခက်သွားပါလိမ့်မည်: callback များ အထပ်ထပ်ဝင်လာသည်နှင့်အမျှ ကုဒ်၏ရှုပ်ထွေးမှုသည် လွန်စွာတိုးပွားလာတတ်ပါသည်။ ထိုသို့သောအခြေအနေကို callback hell - callback ငရဲ ဟုခေါ်ပါသည်။

ပေးထားသောကုဒ်ကို 10 ပုံဖွင့်ရန် ပြန်ရေးပါ၊ ထို့အပြင် error handling ထည့်ပါ။ သင့်တွင် callback hell အခြေအနေ ဖြစ်ပေါ်လာသည်ကို သေချာပါစေ။