How to reload the page after 5 seconds with jQuery

Programming

There are different methods we can use to refresh the page with jQuery after a set amount of time, within this case, 5 seconds. Of course you can use the examples to set your own amount of time, like 10 or 30 seconds or minutes.

We will give a few methods with examples to do this with jQuery and explain what the pros and cons are for the different methods. You don’t need jQuery to only reload the page, see the example at the bottom of the page for a vanilla JavaScript example on how to do this without jQuery.

Related article
How to dynamically create an H1 element with JavaScript

How to refresh the page after 5 seconds with jQuery

We have found 3 easy methods of how you can refresh the page after an x amount of seconds or minutes. For each method, we use the javascript function setTimeout which will set a timer.

  1. Method 1: use the location.reload() function
  2. Method 2: use the history.go() method
  3. Method 3: reload the page with location.replace()
  4. How to reload the webpage after 5 seconds without jQuery

Method 1: Refresh the page with the location.reload() method

The location.reload() method lets you refresh the current webpage. This is the same as when the user clicks the refresh button in the browser. The method accepts one boolean parameter (true or false). If set to true, the browser will do a new page request to the server. The default value is false which means the browser can try to reload from the cache.

When we combine this method with the setTimeout function we can create a page refresh after a set amount of time. In this example, we have set the setTimeout function to 5000 milliseconds. After this amount of time, the function runs its contents, which is, in this case, the page refresh.

Syntax


location.reload(true);

Example

<!DOCTYPE html>
<html>
	<head>
		<title>How to refresh a page after 5 seconds with jQuery?</title>
		
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>
	
	<body>
		<h1>MyHowToOnline.com</h1>
		
		<b>Reload the page after 5 seconds</b>
		
		<p>You can reload the page after 5 seconds for various reasons. For example if you want to check for new messages, updates or notifications. You can easily change the amount of time that you want to use.</p>
		
		<script type="text/javascript">
			$(document).ready(function () {
				setTimeout(function(){
				  location.reload(true);
				  alert("The page will now refresh");
				}, 5000);		
			});
		</script>
	</body>
</html>

Method 2: Use the history.go() method with 0 parameter

For this method, we are going to use the history.go method. The history.go method accepts one numerical parameter. If we use 0 as the parameter, the browser will reload the current webpage.

Syntax

history.go(0);

Example

<!DOCTYPE html>
<html>
	<head>
		<title>Refresh the page after 5 seconds with jQuery</title>
		
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>
	
	<body>
		<h1>MyHowToOnline.com</h1>
		
		<b>Reload the website after 5 seconds</b>
		
		<script type="text/javascript">
			$(document).ready(function () {
				setTimeout(function(){
				  history.go(0);
				  alert("The page will now refresh");
				}, 5000);		
			});
		</script>
	</body>
</html>

Method 3: Reload the website with location.replace()

If we use the location.replace method with location.pathname as value, the browser will reload the webpage. The location.pathname variable will return the present URL and if we pass that to the location.replace() function it will reload the actual page.

Syntax

 
location.replace(location.pathname);

Example

<!DOCTYPE html>
<html>
	<head>
		<title>Reload the current page after 5 seconds with jQuery</title>
		
		<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
	</head>
	
	<body>
		<h1>MyHowToOnline.com</h1>
		
		<b>Reload the page after 5 seconds</b>
		
		<script type="text/javascript">
			$(document).ready(function () {
				setTimeout(function(){
				  location.replace( location.pathname );
				  alert("The page will now refresh");
				}, 5000);		
			});
		</script>
	</body>
</html>

How to reload the page without jQuery

For all these examples we used jQuery, but that is not necessary. We can also refresh the page after 5 seconds with only JavaScript code. See the following snippet for an example.

<script type="text/javascript">
	setTimeout(function(){
	  location.reload(true);
	  alert("5 Seconds has passed! The page will now refresh");
	}, 5000);
</script>

Related Posts