Pb28 Reload Page in JavaScript After Seconds
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.
<!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.
<!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.