JavaScript clearTimeout() এবং clearInterval() মেথডের ব্যবহার

ভূমিকা

JavaScript-এ setTimeout() এবং setInterval() ব্যবহার করে টাইমার সেট করা যায়। কিন্তু প্রয়োজনে এই টাইমারগুলো বন্ধ বা ক্যাঞ্সেল করার জন্য clearTimeout() এবং clearInterval() মেথডগুলো ব্যবহার করা হয়। এই আর্টিকেলে এই দুটি মেথডের ব্যবহার দেখানো হয়েছে।

সম্পূর্ণ কোড উদাহরণ

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .timeout {
    margin-right: 170px;
    display: inline-block;
    width: 200px;
    height: 200px;
  }
  .interval {
    display: inline-block;
    width: 200px;
    height: 200px;
  }
  .stopTimeout {
    margin-right: 100px;
  }
</style>
</head>
<body>
<h1>clearTimeout() & clearInterval() মেথড</h1>
<div class="timeout" style="background-color: blue;"></div>
<div class="interval" style="background-color: blue;"></div>
<br />
<button class="startTimeout" onclick="startTimeout()">START TIMEOUT</button>
<button class="stopTimeout" onclick="stopTimeout()">STOP TIMEOUT</button>
<button class="startInterval" onclick="startInterval()"> START INTERVAL </button>
<button class="stopInterval" onclick="stopInterval()">STOP INTERVAL</button>
<div class="resultInterval"></div>
<div class="resultTimeout"></div>
<script>
  let resInterval = document.querySelector(".resultInterval");
  let resTimeout = document.querySelector(".resultTimeout");
  
  function changeColor(ele) {
    if (ele.style.backgroundColor == "blue") {
      ele.style.backgroundColor = "red";
    } else {
      ele.style.backgroundColor = "blue";
    }
  }
  
  let timeout;
  function startTimeout() {
    timeout = setTimeout(
      changeColor.bind(this, document.querySelector(".timeout")),
      1500
    );
    resTimeout.innerHTML = "টাইমআউট শুরু হয়েছে";
  }
  
  function stopTimeout() {
    clearTimeout(timeout);
    resTimeout.innerHTML = "টাইমআউট ক্লিয়ার করা হয়েছে";
  }
  
  let interval;
  function startInterval() {
    interval = setInterval(
      changeColor.bind(this, document.querySelector(".interval")),
      1500
    );
    resInterval.innerHTML = "ইন্টারভাল শুরু হয়েছে";
  }
  
  function stopInterval() {
    clearInterval(interval);
    resInterval.innerHTML = "ইন্টারভাল ক্লিয়ার করা হয়েছে";
  }
</script>
</body>
</html>

মূল পার্থক্য

কোড ব্যাখ্যা

changeColor() ফাংশন

এলিমেন্টের ব্যাকগ্রাউন্ড রঙ নীল হলে লাল করে, লাল হলে নীল করে টগল করে।

Timeout লজিক

• startTimeout() - 1.5 সেকেন্ড পর changeColor কল করে, টাইমআউট আইডি সংরক্ষণ করে
• stopTimeout() - সংরক্ষিত আইডি দিয়ে clearTimeout() কল করে টাইমার বন্ধ করে

Interval লজিক

• startInterval() - প্রতি 1.5 সেকেন্ড পর changeColor কল করে, ইন্টারভাল আইডি সংরক্ষণ করে
• stopInterval() - সংরক্ষিত আইডি দিয়ে clearInterval() কল করে ইন্টারভাল বন্ধ করে

গুরুত্বপূর্ণ নোট

• টাইমআউট/ইন্টারভাল আইডি ভেরিয়েবলে সংরক্ষণ রাখা জরুরি
• clearTimeout()/clearInterval() কল না করলে মেমরি লিক হতে পারে
• কом্পোনেন্ট আনমাউন্ট হলে অবশ্যই ক্লিনআপ করা উচিত

আউটপুট

বাটন ক্লিক করলে নীল বক্সগুলো ১.৫ সেকেন্ড পর লাল হবে। STOP বাটন চাপলে রঙ পরিবর্তন বন্ধ हो जाएगा।