জাভাস্ক্রিপ্টে টাইমার শুরু এবং বন্ধ করার বাটন

এখন চলুন দুটি বাটন তৈরি করি: প্রথমটিতে ক্লিক করলে টাইমার শুরু হোক, আর দ্বিতীয়টিতে ক্লিক করলে বন্ধ হোক। এখানে সবকিছু এত সহজ হবে না এবং আমাদের জন্য একটি সমস্যা লুকিয়ে আছে। এই সমস্যাটির সারবস্তু বোঝার জন্য, আমি ধাপে ধাপে কোড তৈরি করব।

সুতরাং, দুটি বাটন তৈরি করা যাক:

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

তাত্ত্বিক অংশে আমি দেওয়া কোডটি এই বিষয়টি বিবেচনা করে না যে স্টার্ট বাটনে একাধিকবার ক্লিক করা যেতে পারে। এই সমস্যা সমাধানের জন্য স্টার্ট বাটনে ক্লিক করলে ইভেন্টটি এই বাটন থেকে আনবাইন্ড করা যেতে পারে, আর স্টপ বাটনে ক্লিক করলে - আবার বাইন্ড করা যেতে পারে। সমস্যাটি সংশোধন করুন।