जावास्क्रिप्ट पर टाइमर शुरू और रोकने के बटन

चलिए अब दो बटन बनाते हैं: पहले बटन पर क्लिक करने पर टाइमर शुरू होना चाहिए, और दूसरे बटन पर क्लिक करने पर - रुकना चाहिए। यहाँ सब कुछ इतना आसान नहीं होगा और हमें एक मुश्किल का सामना करना पड़ेगा। इस मुश्किल का सार समझने के लिए, कोड बनाने के चरणों में वर्णन करता हूँ।

तो, दो बटन बनाइए:

<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();
});

सैद्धांतिक भाग में मेरे द्वारा दिया गया कोड इस बात को ध्यान में नहीं रखता कि स्टार्ट बटन पर कई बार क्लिक किया जा सकता है। इस समस्या को ठीक करने के लिए स्टार्ट बटन पर क्लिक करने पर इस बटन से इवेंट को अनबाइंड किया जा सकता है, और स्टॉप बटन पर क्लिक करने पर - वापस बाइंड कर दिया जा सकता है। समस्या को ठीक करें।