Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 5 seconds, use the setInterval() method to set the time interval. Add the webpage in window.location.href object.
As we know, whenever we need to call a function or some block of code after a specific delay of time we use the setTimeout() and the setInterval() methods of JavaScript. Lts look at the use of these methods to redirect a web page by 5 seconds.
To redirect a page we will use the document.location.href or window.location.href object of JavaScript as shown below −
document.location.href=""; OR window.location.href="";
Let us understand the use of the setTimeout() and the setInterval() methods with document.location.href object one by one in detail to delay web page redirection by 5 seconds.
Using the setTimeout() Method
We will use the setTimeout() method as usual by giving it a call-back function and by specifying a particular limit of time after which it will invoke the call-back function which will redirect the web page.
Syntax
The following syntax will be used to implement the setTimeout() method with the document.location.href object −
setTimeout(callBack_func, timeInterval);
function callBack_func() {
document.location.href = "";
}
Let us understand the code implementation of the setTimeout() method to redirect the page after 5 seconds.
Algorithm
Step 1 − In the first step, we will define a call-back function for the onclick event associated with the button tag in the HTML document.
Step 2 − In this step, we will call the setTimeout() method with a callback function and a time interval inside the function declared in previous step.
Step 3 − In the last step, we will define the call back function of the setTimeout() method which uses the document.location.href object to redirect the page after given interval of time.
Example
The code example below will explain the use of the setTimeout() method to delay the redirection of a web page by 5 seconds −
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to resirect a webpage after 5 seconds </h2>
<p id = "result"></p>
<button onclick = "redirect()">Click to Redirect to Tutorials Point</button>
<script>
function redirect () {
setTimeout(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will redirect after delay of 5 seconds";
}
function myURL() {
document.location.href = 'https://www.tutorialspoint.com/index.htm';
}
</script>
</body>
</html>
The above example will redirect the web page to the official page of the tutorialspoint.com after 5 seconds of clicking the button and it is happening due to the setTimeout() method which is used with the document.location.href object in the above code.
Using the setInterval() Method
We can also use the setInterval() method to delay the web page redirection by a specific time interval. But, while using the setInterval() method for this purpose we need to be careful because it will repeatedly call the function passed inside it as a call back function. We can use the clearInterval() method to stop it from calling the function repeatedly.
Syntax
The following syntax will make you understand how you can use the setInterval() method with the clearInterval() method as well as with the document.location.href object −
var interval_name = setInterval(call_back, time_interval);
function call_back() {
document.location.href = "";
clearInterval(interval_name);
}
Let us understand it practically with help of a code example that how we can use the setInterval() method to redirect a page after 5 seconds.
Algorithm
The algorithm of above example and this example is almost same you just need to replace the setTimeout() method in previous example with setInterval() method and store it into a variable, and then you have to use the clearInterval() method inside the call back function of the setInterval() with the variable passed to it in which the setInterval() method is stored.
Example
The below example will illustrates the use of setInterval() method as well as the changes you need to perform in the algorithm of the previous example −
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to redirect a webpage after 5 seconds</h2>
<p id="result"></p>
<button onclick="redirect()">Click to Redirect to Tutorials Point</button>
<script>
function redirect () {
var interval = setInterval(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will redirect after delay of 5 seconds setInterval() method.";
}
function myURL() {
document.location.href = 'https://www.tutorialspoint.com/index.htm';
clearInterval(interval);
}
</script>
</body>
</html>
In the above example, we have used the setInterval() method inside the redirect() function which will be triggered once the user click the button, where the setInterval() will call its call back function after the 5 seconds and redirect the page to the given URL in the document.location.href object and then it will clear the interval so that it will not call the function again and redirect to the same page repeatedly.
In this tutorial, we have seen the use of the setTimeout() and the setInterval() methods with the document.location.href object to redirect the web page after 5 seconds. We have discussed both of these methods by practically implementing them with help of code example to understand their working in a better way.
33K+ Views
To Continue Learning Please Login