How to auto-reload a Page every N seconds using JavaScript

# Table of Contents

# Auto-reload a Page every N seconds using setInterval in JavaScript

To auto-reload a page every N seconds in JavaScript:

Use the setInterval() method to run a function every 1000 milliseconds.
Declare a timer variable that gets incremented every second.
Once the timer variable reaches the given number of seconds, call the window.location.reload() method.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h2 id="refresh-timer"></h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
const refreshTimer = document.getElementById('refresh-timer');

let timerInSeconds = 0;

setInterval(() => {
  timerInSeconds += 1;

  refreshTimer.innerHTML = `Refreshing page in 3 sec: ${timerInSeconds} seconds`;

  if (timerInSeconds >= 3) {
    window.location.reload();
  }
}, 1000);

auto reload page every n seconds in javascript

The code for this article is available on GitHub

We used the document.getElementById() method to select the refresh-timer element by its ID.

We could've also used the document.querySelector() method to achieve the same result.

index.js

Copied!
const refreshTimer = document.querySelector('#refresh-timer');

We used the setInterval() method to repeatedly call a function every N milliseconds.

We called the function every 1000 milliseconds (1 second) to update the innerHTML property of the refresh-timer element.

index.js

Copied!
const refreshTimer = document.getElementById('refresh-timer');

let timerInSeconds = 0;

setInterval(() => {
  timerInSeconds += 1;

  refreshTimer.innerHTML = `Refreshing page in: ${timerInSeconds} seconds`;

  if (timerInSeconds >= 3) {
    window.location.reload();
  }
}, 1000);

The code for this article is available on GitHub

Each time the callback function is invoked:

We increment the timer by 1 second.
We update the innerHTML property of the refresh timer element to display how many seconds remain until the page is refreshed.

The example refreshes the page every 3 seconds, however, you can adjust this depending on your use case.

The following code sample refreshes the page every 5 seconds.

index.js

Copied!
const refreshTimer = document.getElementById('refresh-timer');

let timerInSeconds = 0;

setInterval(() => {
  timerInSeconds += 1;

  refreshTimer.innerHTML = `Refreshing page in: ${timerInSeconds} seconds`;

  if (timerInSeconds >= 5) {
    window.location.reload();
  }
}, 1000);

Once the timer reaches the specified number of seconds, the page is auto-reloaded using the window.location.reload() method.

The location.reload() method reloads the current URL in the same way the Refresh button does.

auto reload page every n seconds in javascript

# Using the `http-equiv` directive to auto-refresh the page every N seconds

You can also use the http-equiv directive to auto-reload the page every N seconds.

The following example doesn't require you to use JavaScript.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />

    <!-- 👇️ Auto-refresh every 3 seconds -->
    <meta http-equiv="refresh" content="3" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h2 id="refresh-timer"></h2>
  </body>
</html>

auto refresh page every n seconds using meta tag

The code for this article is available on GitHub

Adding the following meta tag to the head section of your HTML page auto-refreshes the page every 3 seconds.

index.html

Copied!
<meta http-equiv="refresh" content="3" />

When the http-equiv attribute is set to refresh, the browser is instructed to reload the page after the specified content seconds.

The content attribute is set to 3, so the page gets reloaded after 3 seconds.

# Using the `setTimeout()` function to auto-refresh the page every N seconds

You can also use the setTimeout() function to auto-refresh the page every N seconds.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
setTimeout(() => {
  window.location.reload();
}, 3000);

auto refresh page every n seconds using settimeout

The setTimeout() method sets a timer that executes a function after a specified delay.

Note that the delay is specified in milliseconds.

1000 milliseconds = 1 second, so using a value of 3000 milliseconds refreshes the page every 3 seconds.

# Using the `window.onload` event to auto-refresh a page every N seconds

You can also use the window.onload event to auto-refresh a page every N seconds.

Here is the HTML for the example.

index.html

Copied!
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
  </head>

  <body>
    <h2>bobbyhadz.com</h2>

    <h2 id="refresh-timer"></h2>

    <script src="index.js"></script>
  </body>
</html>

The code for this article is available on GitHub

And here is the related JavaScript code.

index.js

Copied!
window.onload = function refreshEveryNSeconds() {
  const refreshTimer = document.getElementById('refresh-timer');
  let timerInSeconds = 0;

  setInterval(() => {
    timerInSeconds += 1;

    refreshTimer.innerHTML = `Refreshing page in: ${timerInSeconds} seconds`;

    if (timerInSeconds >= 3) {
      window.location.reload();
    }
  }, 1000);
};

refresh page every n seconds using window onload

The code for this article is available on GitHub

The load event is triggered when the whole page has loaded, including the page's stylesheets, scripts, iframes and images.

Waiting for the load event might be necessary if you want to render the entire page before you start the timer.

We used the setInterval() method to run some code every 1 second (1000 milliseconds).
Each time the callback function is run, we update the innerHTML attribute of the refresh timer element to display the time before the page is refreshed.
We also increment the timer by 1 second.
Once the timer reaches 3 seconds, we use the window.location.reload() method to refresh the page.

I've also written an article on how to refresh an image with a new one at the same URL using JS.

# Additional Resources

You can learn more about the related topics by checking out the following tutorials:

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.

You can use the search field on my Home Page to filter through all of my articles.

How to auto-reload a Page every N seconds using JavaScript

# Table of Contents

# Auto-reload a Page every N seconds using setInterval in JavaScript

# Using the http-equiv directive to auto-refresh the page every N seconds

# Using the setTimeout() function to auto-refresh the page every N seconds

# Using the window.onload event to auto-refresh a page every N seconds

# Additional Resources

Borislav Hadzhiev

# Using the `http-equiv` directive to auto-refresh the page every N seconds

# Using the `setTimeout()` function to auto-refresh the page every N seconds

# Using the `window.onload` event to auto-refresh a page every N seconds