Skip to main content

How to Auto-Reload a Page Every N Seconds in JavaScript

Automatically reloading a web page is a common requirement for dashboards, live status pages, or any application that needs to display frequently updated data. There are several ways to achieve this, from a simple HTML meta tag to more flexible JavaScript solutions.

This guide will teach you the three main methods for auto-reloading a page. We will cover the simple meta tag approach, the straightforward setTimeout method, and the more complex setInterval method for displaying a countdown timer to the user.

Method 1 (Simplest): The HTML meta Refresh Tag​

The easiest way to auto-refresh a page requires no JavaScript at all. You can use a special <meta> tag with the http-equiv="refresh" attribute.

The Logic: this tag instructs the browser to reload the page after a specified number of seconds.

The solution is to add the following line to the <head> section of your HTML file.

<head>
  <!-- This meta tag will cause the page to reload every 5 seconds -->
  <meta http-equiv="refresh" content="5">
</head>
note

The content attribute value is the delay in seconds. This is the simplest solution but offers no flexibility or user feedback.

The setTimeout() function is the standard and most direct way to schedule a single action in the future. For an auto-reload, we can simply tell it to call location.reload() after a specified delay.

The logic:

  1. Use setTimeout() to schedule a function call.
  2. The function to call is location.reload(), which reloads the current page.
  3. The delay is specified in milliseconds (1 second = 1000 milliseconds).

Solution:

// Set the refresh delay to 5 seconds (5000 milliseconds)
const refreshDelay = 5000;

setTimeout(() => {
  // The location.reload() method reloads the current URL.
  location.reload();
}, refreshDelay);

console.log(`The page will reload in ${refreshDelay / 1000} seconds.`);
note

This is the recommended JavaScript best practice for a simple, one-time reload after a delay.

Method 3 (For User Feedback): setInterval() with a Countdown​

If you want to provide a better user experience by showing a countdown timer before the page reloads, the setInterval() function is the right tool.

The logic:

  1. Use setInterval() to run a function every second (1000 ms).
  2. Inside the function, decrement a counter.
  3. Update a DOM element to show the user how many seconds are left.
  4. When the counter reaches zero, clear the interval and call location.reload().

Solution:

<p>Page will refresh in <span id="countdown">10</span> seconds.</p>
let secondsUntilRefresh = 10;
const countdownSpan = document.getElementById('countdown');

// Update the countdown every second
const countdownTimer = setInterval(() => {
  secondsUntilRefresh--;
  
  // Update the display
  countdownSpan.textContent = secondsUntilRefresh;
  
  // When the countdown reaches 0, reload the page
  if (secondsUntilRefresh <= 0) {
    clearInterval(countdownTimer); // Stop the interval
    location.reload();
  }
}, 1000);

Conclusion​

Auto-reloading a page is a straightforward task with several good solutions depending on your needs.

  • For a simple, no-JavaScript solution, use the <meta http-equiv="refresh" content="N"> tag in your HTML.
  • For a simple, one-time reload from JavaScript, the setTimeout(location.reload, delay) method is the recommended best practice.
  • If you need to display a countdown timer to the user, use setInterval() to update the UI and trigger the reload when the timer expires.

Table of Contents