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
How to use JavaScript to redirect a webpage after 5 seconds?
In this tutorial, we learn to use JavaScript to redirect a webpage after 5 seconds. To redirect a webpage after a delay, we use the setTimeout() method combined with window.location.href to set the destination URL.
JavaScript provides two timing methods for delayed execution: setTimeout() for single execution and setInterval() for repeated execution. For page redirection, setTimeout() is the preferred method.
To redirect a page we use the window.location.href property to change the current page URL:
window.location.href = "https://example.com";
Using setTimeout() Method (Recommended)
The setTimeout() method executes a function once after a specified delay. This is ideal for one-time redirections.
Syntax
setTimeout(function, delay);
function redirectPage() {
window.location.href = "destination-url";
}
Example
Here's a complete example that redirects to TutorialsPoint after 5 seconds:
<!DOCTYPE html>
<html>
<body>
<h2>Page Redirect Example</h2>
<p id="message"></p>
<button onclick="startRedirect()">Redirect to TutorialsPoint in 5 seconds</button>
<script>
function startRedirect() {
document.getElementById("message").innerHTML =
"<b>Redirecting to TutorialsPoint in 5 seconds...</b>";
setTimeout(function() {
window.location.href = "https://www.tutorialspoint.com/index.htm";
}, 5000);
}
</script>
</body>
</html>
Using setInterval() Method
While setInterval() can be used for redirection, it requires clearInterval() to prevent repeated redirections. This approach is less common but useful when you need to check conditions repeatedly.
Syntax
var intervalId = setInterval(function, delay);
function redirectPage() {
window.location.href = "destination-url";
clearInterval(intervalId);
}
Example
<!DOCTYPE html>
<html>
<body>
<h2>Redirect with setInterval()</h2>
<p id="countdown"></p>
<button onclick="startCountdown()">Start 5 Second Countdown</button>
<script>
let timeLeft = 5;
let intervalId;
function startCountdown() {
intervalId = setInterval(function() {
document.getElementById("countdown").innerHTML =
"Redirecting in " + timeLeft + " seconds...";
timeLeft--;
if (timeLeft < 0) {
clearInterval(intervalId);
window.location.href = "https://www.tutorialspoint.com/index.htm";
}
}, 1000);
}
</script>
</body>
</html>
Comparison
| Method | Execution | Use Case | Cleanup Required |
|---|---|---|---|
setTimeout() |
Once only | Simple delayed redirect | No |
setInterval() |
Repeated | Countdown or conditional checks | Yes - use clearInterval()
|
Automatic Redirect on Page Load
You can also redirect automatically when the page loads:
<!DOCTYPE html>
<html>
<body>
<h2>Auto Redirect Demo</h2>
<p>This page will redirect to TutorialsPoint in 5 seconds...</p>
<script>
// Automatically redirect after 5 seconds when page loads
setTimeout(function() {
window.location.href = "https://www.tutorialspoint.com/index.htm";
}, 5000);
</script>
</body>
</html>
Conclusion
Use setTimeout() for simple page redirections after a delay. For countdown displays or conditional redirects, setInterval() with proper cleanup provides more control over the redirect process.
42K+ Views
