Reload Page in JavaScript After Seconds
by Vincy. Last modified on February 11th, 2024.
Auto reloading helps to reload the recent update on the webpage. It enhances the user experience to see new content without manual intervention.
There are various methods to achieve the page reloading. This article lists some of them using JavaScript.
This quick example uses the JavaScript setTimeout() method to set the timer for reloading the page. In this example, it reloads the page after every 5000 milliseconds.
Quick example
<!DOCTYPE html>
<html>
<head>
<title>Reload Page in JavaScript after (n) Seconds Example</title>
</head>
<body>
<h1>Reload Page in JavaScript after 5 Seconds</h1>
<script type="text/javascript">
// Reload the page after 5 seconds
setTimeout(function () {
location.reload();
}, 5000);
</script>
</body>
</html>
JavaScript timers are helpful when working with automatic client-side tickers. I used JavaScript setTimeOut to run a news ticker to marque flash news.
Reload the page using JavaScript history.go
The JavaScript history.go() loads a particular page by its session index. This method receives the optional session index.
In this article, it is used to reload the current page by passing the session index as 0. If the session index is empty or 0, this method call will simulate the location.reload() effect.
The JavaScript code below calls the history.go() with a timer.
history.html
<!DOCTYPE html>
<html>
<head>
<title>Reload Page in JavaScript after Seconds using history function</title>
</head>
<body>
<h1>Reload Page in JavaScript after 5 Seconds using history function</h1>
<script type="text/javascript">
// Reload the page after 5 seconds using history function
setTimeout(function () {
history.go(0);
}, 5000);
</script>
</body>
</html>
Page reload using the polling method
Instead of JavaScript setTimeout(), we can also use the setInterval() method to call the reload at a periodic interval.
The setInterval() gives a closer output comparatively (sometimes lags depending on the process on the main thread, if any). We saw the “How to Wait 1 Second in JavaScript” code details.
This example code uses the JavaScript setInterval() to repeat the polling in a 3000 milliseconds interval.
The fetchData() function generates a random number and calls a method to update the page content.
The polling looks for the new random number generated and updates the UI periodically.
polling.html
<!DOCTYPE html>
<html>
<head>
<title>Polling Example that uses periodic calls after 3 secs</title>
<script type="text/javascript">
function fetchData() {
// Simulating AJAX request to fetch data from the server
// This is a stub - replace this with your own AJAX implementation
setTimeout(function () {
// this is sample data from server
// I am just using random to simulate it
var data = Math.random();
updatePage(data); // Call function to update the page with the fetched data
}, 3000); // Polling interval: 3 seconds (3000 milliseconds)
}
function updatePage(data) {
// Update the page with the fetched data
document.getElementById("data-container").innerHTML = data;
}
// Start the polling when the page loads
window.onload = function () {
fetchData();
setInterval(fetchData, 3000); // Repeat the polling every 3 seconds
};
</script>
</head>
<body>
<h1>Polling Example - Refresh after 3 seconds</h1>
<p>How to use polling to periodically fetch new data from a server and update the page without reloading it.</p>
<div id="data-container"></div>
</body>
</html>
The polling concept is helpful in many scenarios. Once, we used it to get the logged-in session state to redirect accordingly.
Download
Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.