Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 to prevent memory leaks and unwanted executions.
JavaScript clearTimeout() Method
The clearTimeout() method clears a timeout that was previously set by setTimeout(). It prevents the scheduled function from executing if called before the timeout completes.
Syntax
clearTimeout(timeoutID)
Parameters
- timeoutID ? The ID returned by setTimeout() that identifies the timeout to clear
Return Value
This method does not return any value (undefined).
Example: clearTimeout() in Action
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.box {
width: 150px;
height: 150px;
background-color: lightblue;
margin: 20px 0;
transition: background-color 0.3s;
}
button {
margin: 5px;
padding: 10px 15px;
}
#status {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>clearTimeout() Example</h2>
<div class="box" id="timeoutBox"></div>
<button onclick="startTimeout()">Start Timeout (3 seconds)</button>
<button onclick="stopTimeout()">Clear Timeout</button>
<div id="status">Ready</div>
<script>
let timeoutID;
const statusDiv = document.getElementById('status');
const box = document.getElementById('timeoutBox');
function startTimeout() {
statusDiv.textContent = 'Timeout started! Box will turn red in 3 seconds...';
timeoutID = setTimeout(() => {
box.style.backgroundColor = 'red';
statusDiv.textContent = 'Timeout executed! Box turned red.';
}, 3000);
}
function stopTimeout() {
clearTimeout(timeoutID);
statusDiv.textContent = 'Timeout cleared! Box will not change color.';
}
</script>
</body>
</html>
JavaScript clearInterval() Method
The clearInterval() method stops a repeating timer that was created with setInterval(). This prevents the function from executing repeatedly.
Syntax
clearInterval(intervalID)
Parameters
- intervalID ? The ID returned by setInterval() that identifies the interval to clear
Return Value
This method does not return any value (undefined).
Example: clearInterval() in Action
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
margin: 20px;
}
.blinking-box {
width: 150px;
height: 150px;
background-color: green;
margin: 20px 0;
transition: background-color 0.3s;
}
button {
margin: 5px;
padding: 10px 15px;
}
#counter {
margin-top: 10px;
font-weight: bold;
}
</style>
</head>
<body>
<h2>clearInterval() Example</h2>
<div class="blinking-box" id="intervalBox"></div>
<button onclick="startInterval()">Start Blinking</button>
<button onclick="stopInterval()">Stop Blinking</button>
<div id="counter">Blinks: 0</div>
<script>
let intervalID;
let blinkCount = 0;
const counterDiv = document.getElementById('counter');
const box = document.getElementById('intervalBox');
let isGreen = true;
function startInterval() {
blinkCount = 0;
intervalID = setInterval(() => {
isGreen = !isGreen;
box.style.backgroundColor = isGreen ? 'green' : 'orange';
blinkCount++;
counterDiv.textContent = `Blinks: ${blinkCount}`;
}, 500);
}
function stopInterval() {
clearInterval(intervalID);
box.style.backgroundColor = 'green';
isGreen = true;
counterDiv.textContent = `Stopped at ${blinkCount} blinks`;
}
</script>
</body>
</html>
Key Differences
| Method | Clears | Use Case |
|---|---|---|
clearTimeout() |
One-time timer | Cancel a delayed execution |
clearInterval() |
Repeating timer | Stop recurring executions |
Best Practices
- Always store the timer ID when creating timeouts/intervals
- Clear timers in cleanup functions (like component unmount)
- Clear timers when they're no longer needed to prevent memory leaks
- Use meaningful variable names for timer IDs for better code readability
Conclusion
The clearTimeout() and clearInterval() methods are essential for managing timers in JavaScript. Use them to prevent unwanted executions and maintain clean, efficient code.
2K+ Views
