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
Selected Reading
What is the role of clearTimeout() function in JavaScript?
The clearTimeout() function cancels a timeout that was previously set with setTimeout(). When you call setTimeout(), it returns a timeout ID that you can use with clearTimeout() to stop the scheduled execution.
Syntax
clearTimeout(timeoutID)
Parameters
-
timeoutID - The identifier returned by
setTimeout()that you want to cancel
Basic Example
<!DOCTYPE html>
<html>
<head>
<title>clearTimeout Example</title>
</head>
<body>
<button onclick="startTimeout()">Start Timer</button>
<button onclick="cancelTimeout()">Cancel Timer</button>
<p id="message"></p>
<script>
let timeoutId;
function startTimeout() {
document.getElementById('message').textContent = 'Timer started! Will alert in 3 seconds...';
timeoutId = setTimeout(function() {
alert('Time is up!');
document.getElementById('message').textContent = 'Timer completed!';
}, 3000);
}
function cancelTimeout() {
clearTimeout(timeoutId);
document.getElementById('message').textContent = 'Timer cancelled!';
}
</script>
</body>
</html>
Animation Example
Here's a practical example showing how to use clearTimeout() to control animation:
<!DOCTYPE html>
<html>
<head>
<title>Animation Control</title>
<style>
#box {
width: 50px;
height: 50px;
background-color: red;
position: relative;
left: 0px;
}
</style>
</head>
<body>
<div id="box"></div>
<button onclick="startAnimation()">Start</button>
<button onclick="stopAnimation()">Stop</button>
<button onclick="resetPosition()">Reset</button>
<script>
let animationId;
let box = document.getElementById('box');
function startAnimation() {
let currentLeft = parseInt(box.style.left) || 0;
box.style.left = currentLeft + 2 + 'px';
// Continue animation if box hasn't reached edge
if (currentLeft < 400) {
animationId = setTimeout(startAnimation, 20);
}
}
function stopAnimation() {
clearTimeout(animationId);
}
function resetPosition() {
clearTimeout(animationId);
box.style.left = '0px';
}
</script>
</body>
</html>
Key Points
-
clearTimeout()only affects the specific timeout identified by the timeout ID - If the timeout has already executed,
clearTimeout()has no effect - It's safe to call
clearTimeout()with an invalid or undefined ID - Always store the timeout ID returned by
setTimeout()if you plan to cancel it later
Common Use Cases
- User interactions - Cancel delayed actions when user performs different action
- Animation control - Stop animations or transitions
- Debouncing - Cancel previous timeout before setting a new one
- Cleanup - Cancel timeouts when components unmount or pages unload
Conclusion
The clearTimeout() function provides essential control over scheduled code execution. Use it to cancel timeouts when they're no longer needed, creating more responsive and efficient JavaScript applications.
Updated on: 2026-03-15T23:18:59+05:30
342 Views
Advertisements