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 load a webpage after 5 seconds?
In this tutorial, we learn to use JavaScript to load a webpage after 5 seconds. We use the setTimeout() function in JavaScript to load a webpage after some interval. This function waits for some seconds and then loads the web page. We could also apply the setInterval() method to perform our task.
Generally, a web page loads immediately if the network connection to which user connected is very strong, and if the network connection is very poor, then it will take some time to load. But did you know that, we can stop the web page loading for some time and delay the load time of it manually by using JavaScript and give it a desired time by which we want to delay the load.
We can use the following in-built methods of JavaScript to load a web page after 5 seconds −
setTimeout() method
setInterval() method
Let us discuss both of these methods one by one in details with code examples.
Using the setTimeout() Method
The setTimeout() method is used to call a function for once after a specific time assigned to it. It accepts a call back function as parameter and time limit in milliseconds, after which it calls that call back function only once and show the content of the function.
Syntax
Following syntax is used to implement the setTimeout() method to delay any block of code by specific time −
setTimeout(callBack_method, timeInMilliSeconds);
Let us understand the practical implementation of setTimeout() method to load a web page after a delay of 5 seconds.
Algorithm
Step 1 − In the first step, we will define a function for the onclick event of the button that includes the setTimeout() method.
Step 2 − In the next step, we will invoke the setTimeout() method with a callback function and with a time interval to call the function.
Step 3 − In this step, we will define the callback function for the setTimeout() method that contains the link to the web page that has to be loaded after the time interval.
Example
The below example will illustrate how we can use the setTimeout() method to delay the web page loading time by 5 seconds −
<!DOCTYPE html>
<html>
<body>
<h2>Using JavaScript to load a webpage after 5 seconds</h2>
<p id = "result"></p>
<button onclick = "load()">click to load</button>
<script>
function load() {
setTimeout(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = `The page will load after delay of 5 seconds using setTimeout() method.`;
}
function myURL() {
window.open('https://www.tutorialspoint.com/index.htm', name = self);
}
</script>
</body>
</html>
In the above example, we have used the setTimeout() method to delay the web page load by 5 seconds, where we are giving the myURL() function as the call back function to it, which contains the link of the web page to open after 5 seconds using the window.open( "pageAddress"), object and it will load the tutorialspoint official web page after a delay of 5 seconds.
Using the setInterval() Method
The setInterval() method is also used to call a call back function after a delay of given time. But unlike of setTimeout(), setInterval() will call the passed function repeatedly after the given interval of time, and we need to stop it after it calls the function once, so that it cannot load the web page repeatedly after 5 seconds using the clearInterval() method. The syntax to use the setInterval() and clearInterval() are shown below.
Syntax
Following syntax is used to implement the setInterval() and the clearInterval() methods in general −
var intervalName = setInterval(callBack_function, time_interval); clearInterval(intervalName);
Let us understand practically that how we can use the setInterval() and clearInterval() methods to delay the load of a web page by 5 seconds.
Algorithm
The algorithm of this example is almost similar to the above example. You just need to perform some minor changes given below −
Replace the setTimeout() with setInterval() and store it in a variable as shown below −
var intervalName = setInterval(callBack_function, time_interval);
Use the clearInterval() method inside the call back function of the setInterval() method with the variable in which setInterval() is stored.
Example
Below example will explain the changes you have to made and help you to understand the algorithm −
<!DOCTYPE html>
<html>
<body>
<h2>Use JavaScript to load a webpage after 5 seconds</h2>
<p id = "result"></p>
<button onclick = "load()">click to load</button>
<script>
function load() {
var interval = setInterval(myURL, 5000);
var result = document.getElementById("result");
result.innerHTML = "<b> The page will load after delay of 5 seconds using setInterval() method.";
}
function myURL() {
window.open('https://www.tutorialspoint.com/index.htm', name = self);
clearInterval(interval);
}
</script>
</body>
</html>
The above example will load the same page after 5 seconds, but this time with the use of setInterval() method. In this example, we have used the setInterval() method with the clearInterval() method called inside the call back function of it which will clear the setInterval() and make it call the call back function only once and to load the web page only once.
In this tutorial, we have seen the practical implementation of setTimeout() and the setInterval() method to delay the load of a web page by 5 seconds with help of code examples. You can use any interval of time by which you want to delay the load.
12K+ Views
