Settimeout JavaScript – Best 9 Settimeout JavaScript Examples

In this article, you will learn how Settimeout JavaScript works with 9 Settimeout JavaScript Examples.

Basically, whenever you want to perform any task after some interval once then you can use the Settimeout function of JavaScript. In some examples, I am also using JQuery Library so you will also get an idea of how things work with Jquery as well.

How to Add jQuery Library to web Page

To use jQuery inside a web page we will call jQuery from CDN (Content Delivery Network). If you want to learn more about how to use Jquery then you can click here, else you can simply write the below-mentioned code to call jQuery on your web page.

<!DOCTYPE html>
<html>
<head>
	<title> Settimeout Jquery | Settimeout Jquery Example</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
</body>
</html>

In the above code, I have used jQuery CDN, By using CDN we are just loading the jQuery library from the google API server. Click here to check libraries that are hosted on google servers.

Now, let’s check the top examples of Settimeout jQuery.

Example #1: Location reload settimeout JavaScript (reload current page using settimeout JavaScript)

Now you already have an understanding of how this function works. below example, I will show you how you can reload the current page after 20 sec of loading. it means suppose your website user visits the web page and you want to reload the current page after 20 sec then you can use the below code. If you want to increase the timing of the set timeout then it is completely up to you.

Just remember time is written in milliseconds, so whatever you write just write it in milliseconds.

Example of Location reload with settimeout jquery
Example of Location reload with settimeout jquery
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>Example of Location reload with settimeout jquery</h1>
<h2>This page will be automatically reloaded after 20 sec.</h2>


<script>
	

	function ReloadCurrentPage()
	{
	location.reload();
	}

	setTimeout(ReloadCurrentPage, 20000);
</script>

</body>
</html>

In the above code, I have written the h1 and h2 tags, as I said these tags are used for showing headings. Javascript contains the function RealoadCurrentPage which contains “location.reload()” function of javascript. this function will reload the current page, and I have written this function iside of ReloadCrurrentPage. In “settimeout” function I have called “ReloadCurrentPage” function which means automatically location.reload will be executed after 20 sec of page load. As a result, the current page will be reloaded after 20 sec. Now I am moving to the next example.

Example #2: Make checkbox checked after 10 sec using settimeout jQuery.

Let’s check the example where you will see how to check a specific checkbox after 10 sec of page loading. it means if users visit your website and you want to perform some action after specific action then you can use the below code for that.

Now I will give you the code for checking the check box after 10sec, then I will explain the code. If you are just interested in code then you can use code also for your work.

Make checkbox checked after 10 sec using settimeout jQuery
Checked checkbox

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer">
		
	</script>
</head>
<body>

<h1>Example of check checkbox after 10 sec</h1>
<h2>This checkbox will be checked after 10 sec.</h2>
<input type="checkbox" name="cb1" id="cb1" style="width: 40px; height: 40px;">

<script>
	
	function CheckCheckbox()
	{
	$( "#cb1" ).prop("checked", true);	
	}

	setTimeout(CheckCheckbox, 10000);
	
</script>

</body>
</html>

In the above code first I have added code for calling jQuery from CDN, after calling JQuery I can use functions that are written in the jQuery library. Settimeout jQuery function is already given by jQuery to speed up the process of development.

after that, I added an h1 and an h2 tag for displaying the heading. If you want to show any heading to the user you can use these tags. after that, I have written the code of the checkbox which I am going to check automatically after 10 sec.

initially, this checkbox is unchecked, but after writing a few lines of code this checkbox will be checked after 10 sec automatically after loading of the page.

If you are liking the code you can comment in the comment section, it will motivate me to write more content for you.

Let’s move to the next example.

Example #3: Call function to show alert message using settimeout JavaScript.

In the below example, I will show you how you can show an alert message after 30 sec of page loading. Sometimes you have to show some message to the user after a specific time. below code will help you to show some messages to your website users after 30 sec.

alert message using settimeout jquery
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>Example of Showing alert message</h1>
<h2>Alert message will be shown after 30 sec.</h2>


<script>
	

	function ShowAlertMessage()
	{
	 alert('Message after 30 sec.');
	}

	setTimeout(ShowAlertMessage, 30000);
	
</script>

</body>
</html>

The above code contains a heading with the function “ShowAlertMessage”, this function contains an alert message code. The message that you want to show to your user this message will be written in “alert”. You can replace your message with “Message after 30 sec.” and if you want to increase the timing of showing the message then you can write timing in setTimeout parameter. This parameter requires duration in milliseconds. If you want to show an alert message after 1 sec then you can use 1000 or if you want to show an alert message after 20 sec of loading the page then you will add 20000.

let’s move to the next example.

Example #4: Settimeout function with parameters JavaScript.

Due to any reason sometimes you have to pass a set timeout function time as a parameter. Below example, I will show you how you can pass the time of settimeout function with a parameter.

Settimeout function with parameters javascript
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>Example of  passing settimeout time.</h1>
<h2>Alert message will be shown after 30 sec.</h2>


<script>

	function ShowAlertMessage()
	{
	 alert('Message after 30 sec.');
	}

	function PassingTimeAsAParameter(TimeToStart)
	{
		setTimeout(ShowAlertMessage, TimeToStart);
	}

	PassingTimeAsAParameter(30000);

</script>

</body>
</html>

In the above code, I have written two functions, first (PassingTimeAsAParameter) function is used for starting settimout function and the (ShowAlertMessage) function is used for showing messages to users.

After writing these two functions you can see that I have called this function on page load with the parameter (TimeToStart).

I have passed value 30000 to it. It means an Alert message will be shown after 30 seconds.

Moving to the next example.

Example #5: Redirect the user to another page or website using Settimeout JavaScript.

Sometimes you want to redirect a user to a different website or different page after a specific time. you can do this by the below code. Just Checkout below and you will have an idea of how this will work.

Redirect the user to another page or website using Settimeout JavaScript
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>Example of  redirecting user to another page after 10 sec.</h1>
<h2>User will be redirected to another page after 10 sec.</h2>


<script>

	function RedirectUserToAnotherPage()
	{
	window.location.replace("https://marketqna.com/blog/how-to-check-element-or-p-tag-is-visible-or-not-using-jquery/");
	}
	setTimeout(RedirectUserToAnotherPage, 10000);
	
</script>

</body>
</html>

In the above example RedirectUserToAnotherPage function is written, this function contains the code for redirecting users from one page to another. RedirectUserToAnotherPage this function is used in the JavaScript settimeout function which will be executed after 10 sec. As I have already mentioned that we have to enter time in milliseconds.

Let’s move to another example.

Example #6: Settimeout JavaScript with onclick.

In this example, I will show you how you can start settimeout the JavaScript function with a button click. In some cases, you will need to start settimeout on the event instead of the page load, by using the below code you will learn how you can start settimeout function on a button click.

Settimeout JavaScript with onclick

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>Example of  Start settimeout on button click.</h1>
<h2>Settimeout JavaScript function will be started when user will click on below button</h2>
<p>
	<input type="button" name="" onclick="StartSettimeout()" value="Start">
</p>


<script>


function StartSettimeout()
{
	setTimeout(ShowSettimeoutMessage, 10000);
}


function ShowSettimeoutMessage()
{
	alert('Settimeout Message');
}

</script>

</body>
</html>

In the above code, StartSettimeout function will be called when the user will click on the “Start” button. This function contains the code of settimeout. let’s move to another example.

Example #7: Reset settimeout JavaScript

In this example, I will show you how you can reset the timer and start it again with a button click. Sometimes you have to stop the timeout timer and you have to start it again. please refer below code for that.

Reset settimeout JavaScript
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>Example of  Reset Settimeout JavaScript function.</h1>
<h2>Settimeout JavaScript function will be stoped and started again when user will click on below button</h2>
<p>
	<input type="button" name="" onclick="ResetSettimeout()" value="Reset Timer">
</p>

<script>

StartSettimeout();

var timer;
function StartSettimeout()
{
	timer = setTimeout(ShowSettimeoutMessage, 10000);
}
function ResetSettimeout()
{
	//this code will stop timer
	 clearTimeout(timer);
	//this code will start timer again
	 StartSettimeout();

}

function ShowSettimeoutMessage()
{
	alert('Settimeout Message');
}
	
</script>

</body>
</html>

In the above code total of three functions are written first function “StartSettimeout” is written for starting settimeout, the second function “ResetSettimeout” is written for resetting settimeout function and the third “ShowSettimeoutMessage” function is used for show alert message.

The ResetSettimeout function will stop settimeout and will start again it. whenever the user clicks on the reset settimeout button then this function will be executed.

Example #8: How to stop settimeout JavaScript on button click

There might be cases where your settimeout function is already started but you want to stop it, in the below code I will show you how you can stop the already started settimeout function.

How to stop settimeout JavaScript on button click
<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	
</head>
<body>

<h1>Example of  Stop  settimeout on button click.</h1>
<h2>Settimeout JavaScript function will be stopped when user will click on below button</h2>
<p>
	<input type="button" name="" onclick="StopSettimeOut()" value="Stop">
</p>


<script>

var timer = setTimeout(ShowSettimeoutMessage, 10000);

function StopSettimeOut()
{
	  clearTimeout(timer);
}

function ShowSettimeoutMessage()
{
	alert('Settimeout Message');
}
	
</script>

</body>
</html>

In the above example, I have started settimeout function, after that, I am stopping settimeout function on button click.

If the user presses the stop button then settimeout function will be stopped. in the above code there are two functions “ShowSettimeoutMessage” and “StopSettimeOut”, “ShowSettimeoutMessage” function will be executed when settimeout function triggers it and I don’t want this then I will click the stop button it will stop the execution of “ShowSettimeoutMessage” function. Let’s move to the next example.

Example #9: Fadeout div by settimeout jquery (fadeout div after 10 sec jquery)

Fadeout div by settimeout jquery

<!DOCTYPE html>
<html>
<head>
	<title>
	</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" referrerpolicy="no-referrer"></script>
</head>
<body>

<h1>Example of  Fadeout settimeout.</h1>
<h2>Below section will fadeout after 10 sec.</h2>
<h3 style="height: 100px; background-color: red; color: white;" class="fade-out-div">
	This code will fade out
</h3>


<script>


function FadeoutDiv()
{	
	
  $(".fade-out-div").fadeOut();

}
setTimeout(FadeoutDiv, 10000);

</script>

</body>
</html>

In the above design with red color will fade out after 10 sec. for that I have written “FadeoutDiv” function, in this function I have called the jQuery fadeout function by specifying the class name of the section which I want to fade out.

The above function is called in the settimeout function which will be called after 10 sec. Hence, as a result, we will get that or the red section is faded out.

Do you like this article? Please write your opinion in the comment section. if you want more examples with settimeout JavaScript or jQuery you can write them in the comment section.

** Learn how to redirect users from one page to another using JavaScript

** How to check element or p tag is visible or not using JQuery

2 thoughts on “Settimeout JavaScript – Best 9 Settimeout JavaScript Examples”

  1. all the time i used to read smaller articles or reviews which
    as well clear their motive, and that is also happening with this
    piece of writing which I am reading now.

Leave a Comment

Your email address will not be published. Required fields are marked *