How to Redirect a Page After 5 Seconds Using JavaScript and jQuery

No Comment

Redirecting users to another page after a few seconds can be useful in web development when a certain action is performed and automatically you want to redirect the page to another internal or external link. This article explains how to implement a simple redirection after 5 seconds using both JavaScript and jQuery, with a complete HTML example.

Automatically Redirect to Another Page

Steps:

To redirect use window.location.href
To delay redirection use setTimeout or setInterval

1. window.location.href

Use window.location.href to redirect page to another URL.

example:

function redirect() {
        window.location.href = "https://codeindotnet.com"; 
    }

2. Use setTimeout or setInterval

To delay the redirection to another page after some action, you can use one of the following methods:

setTimeout() or
setInterval()

a. Redirect Using setTimeout()

The HTML example below explains how to delay page redirection using setTimeout().

setTimeout(redirect, 5000); // rediret after 5 seconds

Create the HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page Redirection</title>
</head>
<body>
    <div>
        <p>You will be redirected in 5 seconds...</p>
    </div>

    <!-- Add your JavaScript or jQuery code here -->
</body>
</html>

Implement Script (Javascript or jQuery)

Javascript Code:

<script>
    // Function to redirect after 5 seconds
    function redirect() {
        window.location.href = "https://codeindotnet.com";
    }

    // Call the redirect function after 5 seconds
    setTimeout(redirect, 5000); // 5000 milliseconds = 5 seconds
</script>

jQuery Code:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        // Function to redirect after 5 seconds
        function redirect() {
            window.location.href = "https://codeindotnet.com"; 
        }

        // Call the redirect function after 5 seconds
        setTimeout(redirect, 5000); // 5000 milliseconds = 5 seconds
    });
</script>

b. Redirect Using setInterval()

Alternatively, you can also use the setInterval() method to set a timer, like for 5 seconds, and then after that time, send the user to a different web address.

setInterval(function() {
	... redirection code...
}, 1000);

Full HTML code & implementation:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Delay in Page Redirection</title>

<script>
var count = 0;  // Declare counter
var sint = setInterval(function() {
	count++;  // Increment counter
	if(count == 5) {  // If count is 5secs, redirect user
		document.getElementById("countdown").innerHTML = count;
		clearInterval(sint);
		window.location.href = "https://codeindotnet.com"; // Redirect URL
	}
	else {
		// Display updated counter
		document.getElementById("countdown").innerHTML = count;
	}
}, 1000);
</script>

</head>
<body>
    <div>
		<br>
        <p>You will be redirected in <span id="countdown">0</span> seconds...</p>        
    </div>
</body>
</html>