How to Refresh Page Timer in JavaScript
- Automatically Refresh Web Page Using JavaScript
- Automatically Refresh a Web Page Every 5 Seconds Using JavaScript
This article will teach about the refresh page timer in JavaScript. We will see how we can code JavaScript in an HTML page to automatically refresh the page every 5 seconds.
Manually refreshing the web page seems a time-wasting process and effort as we can now automatically refresh web pages in our browsers with the help of JavaScript. So, now let’s understand how we can do that by using JavaScript.
Automatically Refresh Web Page Using JavaScript
We can refresh a web page automatically by using JavaScript. A web page can be refreshed after a specific number of seconds by using JavaScript on the HTML page.
We can use the location.reload method of JavaScript to refresh a web page automatically. Using this method in JavaScript, a code can be called automatically upon an event or when a user clicks on a link.
We use the following code if we want to refresh a web page using a mouse click.
Example code for using mouse click:
<html>
<head>
<title>JavaScript refresh page</title>
</head>
<body>
<button>
<a href="javascript:location.reload(true)"> Click Refresh the Page</a></button>
</body>
</html>
Output:
As we can see in the output, we have a click button option to refresh the web page. A web page refreshes when a user clicks on the click button.
We can use JavaScript to refresh the web page by mouse clicking.
Automatically Refresh a Web Page Every 5 Seconds Using JavaScript
We can also use JavaScript to refresh a web page automatically after a given time. In this case, we gave 5 seconds of the time.
Using the location.reload method and the setTimeout() function; we can refresh a web page every 5 seconds. The setTimeout() is a built-in JavaScript function that we use to execute another function after a given time interval.
To understand this method in a better way, let’s try the following example code. In the following code, we have an HTML code where we used JavaScript.
In JavaScript, we used the setTimeout function to execute the location.reload() in the code. In the body section of the code, we gave the 5 seconds, which you can change as per your requirement.
After running this code, the web page will refresh automatically every 5 seconds.
Example code for refreshing a web page every 5 seconds:
<html>
<head>
<script type = "text/JavaScript">
function AutoRefresh( t ) {
setTimeout("location.reload(true);", t);
}
</script>
</head>
<body onload = "JavaScript:AutoRefresh(5000);">
<p>Your Page will refresh every 5 seconds!</p>
</body>
</html>
The output of the code:
As we can see, the output displays this message after running the code. It means that the web page will refresh automatically every 5 seconds.
It is how we can use JavaScript to refresh a web page automatically every 5 seconds.
We hope you find this article helpful in understanding how to use JavaScript to refresh a web page automatically.
My name is Abid Ullah, and I am a software engineer. I love writing articles on programming, and my favorite topics are Python, PHP, JavaScript, and Linux. I tend to provide solutions to people in programming problems through my articles. I believe that I can bring a lot to you with my skills, experience, and qualification in technical writing.
LinkedIn