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 කින් අඩු කර නව අගය කොන්සෝලයේ දක්වන්න. විචල්‍යයේ අගය ශුන්‍යයට ළඟා වූ වහාම - ටයිමරය නවතාලන්න.

දෙවන බොත්තම ක්ලික් කිරීමෙන් ටයිමරය නවතාලන්න. දෙවන බොත්තම ක්ලික් නොකළත්, විචල්‍යයේ අගය ශුන්‍යයට ළඟා වුවහොත් ටයිමරය නවතාලන්න.

යම් ප්‍රෝග්‍රාමරයක් කේතයක් ලියා ඇත, එය බොත්තම ක්ලික් කිරීමෙන් ටයිමරයක් ආරම්භ කරයි, එය කොන්සෝලයේ දැනට කාලය මොහොත මුද්‍රණය කරයි:

<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 බොත්තම ක්ලික් කිරීමෙන් - නැවත බැඳිය හැකිය. ගැටලුව නිවැරදි කරන්න.