How to reload page after specific seconds in jQuery ?

A page can be reloaded after a specific number of seconds in jQuery using two approaches.

  • Using location.reload() Method
  • Using history.go(0) Method

Using location.reload() Method: This method is used to reload the current page imitating the action of the refresh button of the browser. It has an optional Boolean parameter which can be used to denote that the page is reloaded from the server instead of being loaded from the browser cache.

The refresh code can be executed after a certain period of time using the setTimeout() function. This function has a delay parameter which denotes the time after which the function will execute. This value is given in milliseconds. The amount of time in seconds to be delayed in multiplied by 1000 to convert it to milliseconds.



The setTimeout code can be called after the document has finished loading by selecting the document object and using the ready() method on it. This will cause the page to reload after the specified amount of seconds.

  • Syntax:
    $(document).ready(function () {
          setTimeout(function () {
            alert('Reloading Page');
            location.reload(true);
          }, 5000);
        });
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
      <title>
        How to reload page after
        specific seconds?
      </title>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        How to reload page after
        specific seconds?
      </b>
      <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
      </p>
      <p>
        The page will be reloaded in 5 seconds.
      </p>
      </script>
       
      <script type="text/javascript">
        $(document).ready(function () {
          setTimeout(function () {
            alert('Reloading Page');
            location.reload(true);
          }, 5000);
        });
      </script>
    </body>
    </html>

    chevron_right

    
    

  • Output:
    After loading the page:
    using-reload-before

    After 5 seconds:
    using-reload-after

Using history.go(0) Method: This method loads a URL from the browser’s history depending on the parameter passed to it. If the parameter passed is ‘0’, it reloads the current page.

The refresh code can be executed after a certain period of time using the setTimeout() function. This function has a delay parameter which denotes the time after which the function will execute. This value is given in milliseconds. The amount of time in seconds to be delayed in multiplied by 1000 to convert it to milliseconds.

This code can be called after the document has finished loading by selecting the document object and using the ready() method on it. This will cause the page to reload after the specified amount of seconds.

  • Syntax:
    $(document).ready(function () {
          setTimeout(function () {
            alert('Reloading Page');
            history.go(0);
          }, 5000);
        });
  • Example:
    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
    <head>
        <title>
        How to reload page after
        specific seconds?
      </title>
    </head>
    <body>
      <h1 style="color: green">
        GeeksforGeeks
      </h1>
      <b>
        How to reload page after
        specific seconds?
      </b>
      <p>
        GeeksforGeeks is a computer science
        portal with a huge variety of well
        written and explained computer science
        and programming articles, quizzes and
        interview questions.
      </p>
      <p>
        The page will be reloaded in 5 seconds.
      </p>
      </script>
      
      <script type="text/javascript">
        $(document).ready(function () {
          setTimeout(function () {
            alert('Reloading Page');
            history.go(0);
          }, 5000);
        });
      </script>
    </body>
    </html>

    chevron_right

    
    

  • Output:

  • After loading the page:
    using-history-go-before
    After 5 seconds:
    using-history-go-after



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.