clearTimeout() পদ্ধতি সেটটাইমআউট() ফাংশন দ্বারা পূর্বে সেট করা সময় শেষ করে দেয়। clearInterval() পদ্ধতিটি পূর্বে 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() Method</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 = "Timeout has been started";
}
function stopTimeout() {
clearTimeout(timeout);
resTimeout.innerHTML = "Timeout has been cleared";
}
let interval;
function startInterval() {
interval = setInterval(
changeColor.bind(this, document.querySelector(".interval")),
1500
);
resInterval.innerHTML = "Interval has been started";
}
function stopInterval() {
clearInterval(interval);
resInterval.innerHTML = "Interval has been cleared";
}
</script>
</body>
</html> আউটপুট
"স্টার্ট টাইমআউট" এবং "স্টার্ট ইন্টারভাল" বোতামে ক্লিক করার পরে এবং কিছু সেকেন্ড অপেক্ষা করার পরে -
"স্টপ টাইমআউট" এবং "স্টপ ইন্টারভাল" বোতামে ক্লিক করলে -
