টিউটোরিয়ালঃ সেট টাইম আউট এবং ক্লিয়ার টাইম আউট

আমাদের এই টিউটোরিয়ালর জন্য একটি ডিভিশন এবং দুটো বাটন এলিমেন্টের প্রয়োজন হবে। ধরুন আমরা এমন একটা টাইম আউট ফাংশন করতে চাই যেখানে টাইমস্ট্যাম্পের আপডেট দেখাবে। এখন আমাদের যেটা করতে হবে সেটা হল আমরা যখন সেট টাইম আউট বাটনে ক্লিক করব তখন এই ফাংশনটা প্রতি ১ সেকেন্ড বা ৫০০ মিলিসেকেন্ড অন্তর অন্তর টাইমস্ট্যামটি আপডেট হতে থাকবে। আর আমরা যখন ক্লিয়ার টাইমআউট বাঁটনটিতে ক্লিক করব তখনই এই টাইমস্ট্যাম্পের আপডেট বন্ধ হয়ে যাবে।
আমরা এখন ৫টি গ্লোবাল ভ্যারিয়েবল(চলরাশি) তৈরি করব যেমন setTime, clearTime, divElement, showTime এবং delay নিচে যেভাবে দেখান হয়েছে,

var setTime = document.getElementById('setTime'), // for first button element
clearTime = document.getElementById('clearTime'), // second button element
divElement = document.getElementById('divElement'), // a div element for viewing time-stamp
showTime, // a variable with no value
delay = 500 // 1 second (to set time);

গ্লোবাল ভ্যারিয়েবল তৈরি হয়ে গেলে আমরা showTimeStamp ফাংশন তৈরি করব যাতে আমাদের div এলিমেন্ট-এ টাইমস্ট্যাম্পের আপডেট দেখায়।
সুতরাং, আমাদের ফাংশন স্টেটমেন্টে একটা লোকাল ভ্যারিয়েবল(time) তৈরি করব, যেটার ভ্যালু হবে
new Date().getTime();
তারপর আমাদের ঐ টাইম-স্ট্যাম্পকে ডিভিশন এলিমেন্ট-এ শো করাব। সুতরাং আমাদের কোডটি হবে,
divElement.innerHTML = time;
এরপর আমরা সেট-টাইমআউট ফাংশন তৈরি করব যা কিনা প্রতি ৫০০ মিলিসেকেন্ড এ showTimeStamp কে কল করবে।

function showTimeStatmp() {
  var time = new Date().getTime();
  divElement.innerHTML = time;
  showTime = setTimeout(showTimeStatmp, delay);
}

এরপর আমরা setTime বাটনটিতে একটি ইভেন্ট লিসেনার সংযুক্ত করব যেখানে ক্লিক করলে আমাদের showTimeStamp ফানশন তার কাজ শুরু করে দেবে।

setTime.addEventListener('click', function () {
  showTimeStatmp();
});

এই ফাংশনটিকে বন্ধ করবার জন্য আমরা দ্বিতীয় বাটন এলিমেন্টে আরেকটা ইভেন্ট লিসেনার সংযুক্ত করব যেখানে ক্লিক করলে আমাদের showTimeStamp ফানশন বন্ধ হয়ে যাবে।

clearTime.addEventListener('click', function () {
  clearTimeout(showTime);
});

ফুল জাভাস্ক্রিপ্ট কোড

var setTime = document.getElementById('setTime'),
 clearTime = document.getElementById('clearTime'),
 divElement = document.getElementById('divElement'),
 showTime,
 delay = 500;

function showTimeStatmp() {
 var time = new Date().getTime();
 divElement.innerHTML = time;
 showTime = setTimeout(showTimeStatmp, delay);
}

setTime.addEventListener('click', function () {
 showTimeStatmp();
});

clearTime.addEventListener('click', function () {
 clearTimeout(showTime);
});

ডেমো