JavaScript တွင် အချိန်မှတ်တမ်း (တိုင်မာ) စတင်ရန် နှင့် ရပ်တန့်ရန် ခလုတ်များ

ယခု ခလုတ်နှစ်ခု ပြုလုပ်ကြပါစို့။ ပထမခလုတ်ကို နှိပ်လိုက်သောအခါ အချိန်မှတ်တမ်း (တိုင်မာ) စတင်ပါစေ၊ ဒုတိယခလုတ်ကို နှိပ်လိုက်သောအခါ ရပ်တန့်ပါစေ။ ဤနေရာတွင် အရာရာ အလွယ်တကူ ဖြစ်မည် မဟုတ်ပါ၊ ကျွန်ုပ်တို့အား အတွင်းကျသော အခက်အခဲတစ်ခု စောင့်မျှော်နေပါသည်။ ထို အခက်အခဲ၏ အဓိပ္ပာယ်ကို နားလည်ရန် ကုဒ်ဖန်တီးခြင်းကို အဆင့်လိုက် ရေးပြပါမည်။

ထို့ကြောင့် ခလုတ်ကလေးနှစ်ခု ပြုလုပ်ပါမည်။

<button id="start">start</button>
<button id="stop">stop</button>

ထိုခလုတ်များဆီသို့ ကိုးကားချက်များကို ယာယီအမည်များထဲတွင် ရယူပါမည်။

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

ပထမခလုတ်ကို နှိပ်သောအခါ ၎င်း၏အမှတ်စဉ်ကို ယာယီအမည်တစ်ခုထဲတွင် ရေးထည့်ခြင်းဖြင့် အချိန်မှတ်တမ်း (တိုင်မာ) ကို စတင်ပါမည်။

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

ယခု ဒုတိယခလုတ်ကို နှိပ်သောအခါ အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါမည်။

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

// အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါမည်။
stop.addEventListener('click', function() {
	clearInterval(timerId);
});

သို့သော် အထက်ပါကုဒ်ကို လုပ်ဆောင်ရန် ကြိုးစားပါက အံ့အားသင့်စရာ တွေ့ရပါမည်။ အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ရန် ကြိုးစားသောအခါ timerId ယာယီအမည်သည် undefined နှင့် ညီနေသည်ကို တွေ့ရပါမည်။ မည်သို့ ဤသို့ဖြစ်ရသနည်း။ အကြောင်းမှာ အချိန်မှတ်တမ်း (တိုင်မာ) စတင်သောအခါ ကျွန်ုပ်တို့၏ timerId ယာယီအမည်ကို start ခလုတ်နှင့် ချိတ်ဆက်ထားသော လုပ်ဆောင်ချက်၏ အတွင်းပိုင်း ဧရိယာအတွင်း ဒေသဆိုင်ရာ ဖြစ်အောင် ပြုလုပ်ခဲ့သောကြောင့် ဖြစ်သည်။

ပြဿနာကို ဖြေရှင်းရန် timerId ယာယီအမည်ကို ကမ္ဘာလုံးဆိုင်ရာ ဖြစ်အောင် ပြုလုပ်ပါမည်။ ဤနည်းဖြင့် ၎င်းသည် အချိန်မှတ်တမ်း (တိုင်မာ) စတင်ခြင်း လုပ်ဆောင်ချက်အတွင်း၌လည်းကောင်း၊ ရပ်တန့်ခြင်း လုပ်ဆောင်ချက်အတွင်း၌လည်းကောင်း ရယူသုံးစွဲနိုင်မည် ဖြစ်သည်။

let timerId; // ယာယီအမည်ကို ကမ္ဘာလုံးဆိုင်ရာ ဖြစ်အောင် ပြုလုပ်မည်။

start.addEventListener('click', function() {
	timerId = setInterval(function() {
		console.log('!')
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

စတင်စတွင် 100 ကိန်းတစ်ခုကို သိမ်းဆည်းထားသော ယာယီအမည်တစ်ခု ပေးထားသည်ဟု ယူဆပါ။ ခလုတ်နှစ်ခုလည်း ပေးထားပါသည်။ ပထမခလုတ်ကို နှိပ်သောအခါ အချိန်မှတ်တမ်း (တိုင်မာ) တစ်ခုကို စတင်ပါ။ ထိုအချိန်မှတ်တမ်းသည် ယာယီအမည်၏ တန်ဖိုးကို စက္ကန့်တိုင်း 1 နှုတ်ပေးပြီး အသစ်တန်ဖိုးကို console တွင် ပြသပေးပါမည်။ ယာယီအမည်၏ တန်ဖိုးသည် သုညသို့ ရောက်ရှိသည်နှင့် အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါ။

ဒုတိယခလုတ်ကို နှိပ်သောအခါ အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါ။ ဒုတိယခလုတ်ကို မနှိပ်ရသေးသော်လည်း ယာယီအမည်၏ တန်ဖိုးသည် သုညသို့ ရောက်ရှိပါက အချိန်မှတ်တမ်း (တိုင်မာ) ကို ရပ်တန့်ပါ။

ပရိုဂရမ်မာတစ်ယောက်သည် ခလုတ်တစ်ခုကို နှိပ်သောအခါ လက်ရှိအချိန်ကို console တွင် ပြသနေသော အချိန်မှတ်တမ်း (တိုင်မာ) ကို စတင်သည့် ကုဒ်ကို ရေးသားခဲ့သည်။

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

ကုဒ်ကို လုပ်ဆောင်ပြီးနောက်တွင် ရပ်တန့်ခလုတ် အလုပ်မလုပ်သည်ကို တွေ့ရသည်။ ကုဒ်ရေးသူ၏ အမှားကို ပြင်ဆင်ပေးပါ။

နောက်ထပ် ပရိုဂရမ်မာတစ်ယောက်ကလည်း ယခင်လုပ်စာကို ဖြေရှင်းရန် ကုဒ်ရေးသားခဲ့သည်။

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('#start');
let stop  = document.querySelector('#stop');

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

ကုဒ်ကို လုပ်ဆောင်ပြီးနောက်တွင် ရပ်တန့်ခလုတ် အလုပ်မလုပ်သည်ကို ထပ်မံတွေ့ရသည်။ ကုဒ်ရေးသူ၏ အမှားကို ပြင်ဆင်ပေးပါ။

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval(timerId);
});

<input type="submit" id="start" value="start">
<input type="submit" id="stop"  value="stop">

let start = document.querySelector('start');
let stop  = document.querySelector('stop');

let timerId;

start.addEventListener('click', function() {
	let timerId = setInterval(function() {
		let date = new Date;
		console.log(date.getMinutes() + ' ' + date.getSeconds());
	}, 1000);
});

stop.addEventListener('click', function() {
	clearInterval();
});

သီအိုရီအပိုင်းတွင် ကျွန်ုပ် ဖော်ပြခဲ့သော ကုဒ်သည် start ခလုတ်ကို အကြိမ်ကြိမ် နှိပ်နိုင်သည်ကို ထည့်သွင်းစဉ်းစားထားခြင်း မရှိပါ။ ဤပြဿနာကို ပြင်ဆင်ရန် start ခလုတ်ကို နှိပ်သောအခါ ထိုခလုတ်မှ အဖြစ်အပျက်ကို ခွဲထုတ်ပြီး၊ stop ခလုတ်ကို နှိပ်သောအခါ ပြန်လည် ချိတ်ဆက်ပေးနိုင်ပါသည်။ ပြဿနာကို ပြင်ဆင်ပေးပါ။