Skip to content
Tutorial Reference

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

Three reliable JavaScript methods (meta refresh tag, setTimeout(), and setInterval() with countdown) to automatically reload a page for live dashboards or real-time updates.

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>

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.`);

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.
Navigation