Share
Facebook
Twitter
LinkedIn
Whatsapp
Instagram
Messenger

জাভাস্ক্রিপ্ট Time অবজেক্ট - JavaScript Time Objects

ওয়েব পেজ তথা ওয়েবসাইটে সময় নিয়ে কাজ করার জন্য জাভাস্ক্রিপ্টে Time অবজেক্ট ব্যবহার করা হয়। নিচে একটি ঘড়ি দেখুন, যা জাভাস্ক্রিপ্ট এর Time অবজেক্ট ব্যবহার করে তৈরি করা হয়েছে।

Time ইভেন্ট

জাভাস্ক্রিপ্ট ব্যবহার করে, কোন একটি নির্দিষ্ট সময়-বিরতি বা time-interval এর পর কিছু নির্দিষ্ট জাভাস্ক্রিপ্ট কোড execute করা যায়। এটিকে বলা হয় জাভাস্ক্রিপ্ট Timing ইভেন্ট। জাভাস্ক্রিপ্টে timing ইভেন্ট তৈরি করার জন্য দুইটি পদ্ধতি ব্যবহার করা হয়, নিচে এই পদ্ধতি ২টির নাম দেখুন।

নোট - setTimeout() এবং clearTimeout() দুটিই হল HTML DOM Window object.

setTimeout() মেথড

জাভাস্ক্রিপ্ট এর setTimeout() মেথড ব্যবহার করে ভবিষ্যতের কোন সময়ে নির্ধারিত কিছু জাভাস্ক্রিপ্ট কোড execute করা যায়। নিচে setTimeout() মেথড ব্যবহার করার সিনট্যাক্স দেখুন।

সিনট্যাক্স


var t=setTimeout("javascript statement",milliseconds);

setTimeout() মেথড একটি মান বা value রিটার্ন করে। ওপরে যে সিনট্যাক্স দেখানো হয়েছে, তাতে t নামে একটি ভেরিয়েবলে স্টোর হয়। setTimeout() ফাংশনটি যদি বাতিল বা cancel করতে হয় তবে আমরা এর ভেরিয়েবলের নাম ধরে রেফার করতে পারি। setTimeout() ফাংশনের প্রথম প্যারামিটারটি হল কত গুলো executable জাভাস্ক্রিপ্ট কোডের একটি স্ট্রিং অথবা কোন ফাংশনকে কল করা। দ্বিতীয় প্যারামিটারটি নির্দেশ করে এখন থেকে কত মিলিসেকেন্ড পরে প্রথম প্যারামিটার execute করবে। এক্ষেত্রে আমাদের মনে রাখতে হবে, ১০০০ মিলিসেকেন্ড = ১ সেকেন্ড।

নিচে জাভাস্ক্রিপ্ট এর উদাহরণটি দেখুন। এখানে বাটনে ক্লিক করার ৩ সেকেন্ড পরে একটি এলার্ট-বক্স দেখাবে।

উদাহরণ


<html>
<head>
  <script type="text/javascript">
    function timeMsg()
    {
    var t=setTimeout("alertMsg()",3000);
    }
    function alertMsg()
    {
    alert("Hello");
    }
  </script>
</head>
<body>
  <form>
    <input type="button" value="Display alert box in 3 seconds"onclick="timeMsg()" />
  </form>
</body>
</html>

কোড এডিটর


Infinite লুপ

Infinite লুপ ব্যবহার করে আমরা যদি কোন টাইমার তৈরি করতে চাই তবে আমাদের অবশ্যই একটি ফাংশন রাখতে হবে যেটা নিজেই নিজেকে কল করতে পারে। নিচের জাভাস্ক্রিপ্ট উদাহরণটি দেখুন, এখানে যখন একটি বাটনে ক্লিক করা হয় তখন ইনপুট ফিল্ড 0 থেকে গননা করতে শুরু করে। তবে এখানে লক্ষ করুন যে আমাদের আরও একটা ফাংশন আছে যেটা যাচাই করে আগে থেকেই টাইমার চালু আছে কি না, যদি একাধিকবার বাটন ক্লিক করা হয় তবে যেন আবারও টাইমার চালু না হয়।

উদাহরণ


<html>
<head>
  <script type="text/javascript">
  var c=0;
  var t;
  var timer_is_on=0;
  function timedCount()
  {
  document.getElementById('txt').value=c;
  c=c+1;
  t=setTimeout("timedCount()",1000);
  }

  function doTimer()
  {
  if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
  }
  </script>
</head>

<body>
  <form>
    <input type="button" value="Start count!" onclick="doTimer()">
    <input type="text" id="txt" />
  </form>
</body>
</html>

কোড এডিটর


clearTimeout() মেথড

জাভাস্ক্রিপ্ট এর clearTimeout() মেথড ব্যবহার করে setTimeout() মেথড কে বাতিল করে। নিচে clearTimeout() মেথড এর সিনট্যাক্স দেখুন।

সিনট্যাক্স


clearTimeout(setTimeout_variable)

নিচে প্রদর্শিত জাভাস্ক্রিপ্ট উদাহরণটি উপরের Infinite লুপ এর মতই শুধু পার্থক্য হল এখন আমরা এখানে একটি "stop count" বাটন যুক্ত করেছি যার ফলে আমরা কাউন্টার থামাতে পারি। এর জন্য জাভাস্ক্রিপ্ট Time অবজেক্ট এর clearTimeout() মেথড ব্যবহার করা হয়েছে।

উদাহরণ


<html>
<head>
  <script type="text/javascript">
  var c=0;
  var t;
  var timer_is_on=0;
  function timedCount()
  {
  document.getElementById('txt').value=c;
  c=c+1;
  t=setTimeout("timedCount()",1000);
  }
  function doTimer()
  {
  if (!timer_is_on)
  {
  timer_is_on=1;
  timedCount();
  }
  }
  function stopCount()
  {
  clearTimeout(t);
  timer_is_on=0;
  }
  </script>
</head>
<body>
  <form>
    <input type="button" value="Start count!" onclick="doTimer()">
    <input type="text" id="txt">
    <input type="button" value="Stop count!" onclick="stopCount()">
  </form>
</body>
</html>

কোড এডিটর