JavaScript တွင် အချိန်ပိုင်းသတ်မှတ်ခြင်းများနှင့် အကြောင်းအရာ ဆုံးရှုံးမှု

အချိန်ပိုင်းသတ်မှတ်ခြင်းများကို ဖြစ်ရပ်လက်ခံသည့်များတွင် အသုံးပြုသောအခါ အကြောင်းအရာ ဆုံးရှုံးမှုဆိုင်ရာ ပြဿနာများကို ရင်ဆိုင်ရနိုင်ပါသည်။ ဥပမာတစ်ခုဖြင့် ကြည့်ရှုကြည့်ပါစို့။

ကျွန်ုပ်တို့တွင် input တစ်ခုရှိသည်ဆိုပါစို့:

<input id="elem" value="text">

ဤ input ကို ကလစ်နှိပ်လိုက်သောအခါ အမည်မဲ့ လုပ်ဆောင်ချက် တစ်ခု အလုပ်လုပ်ပြီး ထိုလုပ်ဆောင်ချက်အတွင်းမှ တစ်စက္ကန့်တိုင်း တစ်ခုခုကို console တွင် ပြသပေးမည့် အချိန်ပိုင်းသတ်မှတ်ချက် စတင်လိုက်သည်ဆိုပါစို့:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log('!!!'); // တစ်ခုခုကို console တွင် ပြသပါ
	}, 1000);
});

အခုထိ အားလုံး မှန်ကန်စွာ အလုပ်လုပ်နေပါသည်။ သို့သော် ယခု ကျွန်ုပ်တို့သည် console တွင် ကျွန်ုပ်တို့၏ input ၏ value ကို ပြသလိုပါက - အံ့အားသင့်စရာတစ်ခုကို ကြုံတွေ့ရမည်: console တွင် undefined ကို ပြသပေးနေမည်ဖြစ်သည်:

elem.addEventListener('click', function() {
	setInterval(function() {
		console.log(this.value); // undefined ကို ပြသပေးနေမည်
	}, 1000);
});

ပြဿနာက လုပ်ဆောင်ချက်အတွင်း လုပ်ဆောင်ချက် ဖြစ်နေသောကြောင့် ဖြစ်သည်: အပြင်ဘက်ရှိ အမည်မဲ့ လုပ်ဆောင်ချက် ရှိပြီး ၎င်းကို ကလစ်နှိပ်သောအခါ ခေါ်ယူပြီး အတွင်းဘက်ရှိ အမည်မဲ့ လုပ်ဆောင်ချက်ကို အချိန်ပိုင်းသတ်မှတ်ချက်က စတင်ပေးသည်။ အပြင်ဘက်လုပ်ဆောင်ချက်တွင် this သည် input ကို ညွှန်ပြသော်လည်း အတွင်းဘက်တွင် မဟုတ်ပါ။ အကြောင်းအရာ ဆုံးရှုံးမှု ဖြစ်ပေါ်နေပါသည်။

အဘယ်ကြောင့် ယခင်သင်ခန်းစာများတုန်းကလို console တွင် အမှားတစ်ခု ပေါ်ပေါက်မလာဘဲ undefined ကိုသာ ပြသရသနည်း။ အဘယ်ကြောင့်ဆိုသော် setInterval မှတဆင့် ခေါ်ယူသော လုပ်ဆောင်ချက်အတွင်း this သည် window ကို ညွှန်ပြနေသောကြောင့် ဖြစ်သည်။

ဆိုလိုသည်မှာ ကျွန်ုပ်တို့သည် window object ၏ value property ကို ဖတ်ရန် ကြိုးစားနေပြီး ဤသို့ဖြစ်နေသည်: window.value, သို့သော် ၎င်းတွင် ထို property မရှိသဖြင့် undefined ကို ရရှိခြင်း (အမှားမဟုတ်) ဖြစ်သည်။

self ကို မိတ်ဆက်ခြင်းဖြင့် ပြဿနာကို ပြင်ဆင်ကြည့်ပါမည်:

elem.addEventListener('click', function() {
	let self = this;
	
	setInterval(function() {
		console.log(self.value);
	}, 1000);
});

ဤကဲ့သို့သော code ကို ပေးထားသည်ဆိုပါစို့:

<input type="button" id="elem" value="1">

let elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
	setInterval(function() {
		this.value = Number(elem.value) + 1;
	}, 1000);
});

Code ရေးသူသည် ခလုတ်ကို နှိပ်လိုက်သောအခါ၊ ထိုခလုတ်၏ တန်ဖိုးကို တစ်စက္ကန့်တိုင်း 1 တိုးပေးစေလိုသည်။ သို့သော်၊ ခလုတ်ကို နှိပ်လိုက်သောအခါ ဘာမှပင် မဖြစ်ပျက်ပါ။ ရေးသူ၏ code တွင် ပါဝင်နေသော အမှားကို ပြင်ဆင်ပေးပါ။ ရေးသူ၏ အမှားသည် အဘယ်ကြောင့် ဖြစ်ပေါ်လာရသည်ကို ရှင်းပြပေးမည့် စာသားကို ရေးသားပေးပါ။