Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
JavaScript clearTimeout() & clearInterval() Method
In JavaScript, the clearTimeout() and clearInterval() methods are used to clear timers. When we set a timer using setTimeout() or setInterval() methods, the browser allocates memory to track it.
Therefore, we use these methods to release that memory and avoid unnecessary function calls.
It is best practice to clear timers when they are no longer needed. In this article, we will learn how the clearTimeout() and clearInterval() methods help to clear timers.
JavaScript clearTimeout() method
The clearTimeout() method in JavaScript clears the timeout that has been previously set by the setTimeout() function. It accepts a single integer value as a parameter and if this parameter fails to identify the previously set action, the method does nothing.
Syntax
This method has the following syntax ?
clearTimeout(timeout)
Where, timeout is an ID returned by calling setTimeout(). This parameter acts as an identifier of the timeout you want to clear.
Example
The example below explains the working of JavaScript clearTimeout() method.
<!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;
}
.stopTimeout {
margin-right: 100px;
}
</style>
</head>
<body>
<h1>clearTimeout() Method </h1>
<div class="timeout" style="background-color: blue;"></div>
<br />
<button class="startTimeout" onclick="startTimeout()">START TIMEOUT</button>
<button class="stopTimeout" onclick="stopTimeout()">STOP TIMEOUT</button>
<div class="resultTimeout"></div>
<script>
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";
}
</script>
</body>
</html>
On running the above code, a blue color box along with two buttons will be displayed. Clicking on "START TIMEOUT" button will start the timer and when you click on "STOP TIMEOUT" button, the timer will be cleared.
JavaScript clearInterval() method
The clearInterval() method in JavaScript clears the interval which has been previously set by the setInterval() function. It takes a single integer as a parameter value and if this parameter fails to identify the previously set action, this method does nothing.
Syntax
Syntax of this method is as follows ?
clearInterval(interval)
Where, interval is an ID returned by calling setInterval(). This parameter acts as an identifier of the action you want to clear.
Example
Following is the code for clearInterval() method ?
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.interval {
display: inline-block;
width: 200px;
height: 200px;
}
.stopTimeout {
margin-right: 100px;
}
</style>
</head>
<body>
<h1>clearInterval() Method</h1>
<div class="interval" style="background-color: blue;"></div>
<br />
<button class="startInterval" onclick="startInterval()">START INTERVAL</button>
<button class="stopInterval" onclick="stopInterval()">STOP INTERVAL</button>
<div class="resultInterval"></div>
<script>
let resInterval = document.querySelector(".resultInterval");
function changeColor(ele) {
if (ele.style.backgroundColor == "blue") {
ele.style.backgroundColor = "red";
} else {
ele.style.backgroundColor = "blue";
}
}
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>
On executing the above code, a blue color box along with two buttons will be displayed. Clicking on "START INTERVAL" button will start the timer and when you click on "STOP INTERVAL" button, the timer will be cleared.
2K+ Views
