Open In App

How to reload page after specific seconds in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

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

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:




    <!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>

    
    

  • 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:




    <!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>

    
    

  • Output:

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

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 03 Aug, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads