How to use settimeout in JQuery

Often we have to perform a specific task after some time interval, to perform this JQuery have settimeout. By using settimeout you can execute some tasks after some time intervals. suppose you want to show an alert message after 10 sec of page load, you can perform this by using settimeout.

In Today’s article, we will learn how to use settimeout in JQuery.

How to use settimeout in JQuery ?

First, we will breakdown settimeout into two parts, settimeout(part1, part2)

part1 is for your task and part2 is for the time interval, which is basically in milliseconds. Suppose you have to execute calculate function after 10 sec then you write code like below

setTimeout(Calculate, 10000);

The above code will execute calculate function after 10 sec.

Now I assume that you have a basic understanding of settimeout in JQuery, now we will move to other examples to understand settimeout more.

## Click here to learn, How to check element or p tag is visible or not using JQuery

Show alert after 10 sec in JQuery

Sometimes we have to show an alert message to the user after some interval, In the below example, we will learn how to show an alert message to the user after 10 sec.

First, we will create an HTML page, then we will write code of HTML as per our requirement, for this example, I am writing basic HTML code only for your understanding.

<!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>
<div>
	Plane text
</div>
<script>
setTimeout(ShowMessage, 10000);
	function ShowMessage()
	{
		alert('Hello');
	}
</script>

</body>
</html>

In above code ShowMessage Function will be executed after 10 sec, with message “Hello”. In next example we will lean how to hide div after 20 sec.

How to hide div tag after 10 sec.

To write code for hiding the div we will create an HTML page with a div tag, then we will write the function “HideDiv”, in the “HideDiv” function we will write JQuery code to hide the div, we will use this “HideDiv” function to settimeout with 10 sec which will execute “HideDiv” after 10 sec. Let’s look at the below code…

<!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>
<div id="Test">
	This div will be hidden after 10 sec.
	</div>
<script>
setTimeout(HideDiv, 10000);
	function HideDiv()
	{
		$('#Test').hide();
	}
</script>

</body>
</html>

In the above code, I have written the “HideDiv” function, this function will perform the task of hiding “div”. As you can see the id of div is “Test” and I have used the JQuery hide method to hide div. Now we will move how you can show hidden div after 20 sec.

Show div using settimeout JQuery

To show the hidden div after 20 sec, I will use settimeout. First I will write code of “div” with style to display none, then will write settimeout with function “showHiddenDiv”, this function will show the div which is hidden. You can refer below code.

<!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>
<div id="hiddendiv" style="display: none;">
	hidden div data
</div>
<script>
setTimeout(showHiddenDiv, 20000);
	function showHiddenDiv()
	{
		$('#hiddendiv').show();
	}

</script>

</body>
</html>

In the above code, I have written code to hide div by using style with display none, div id is “hiddendiv”. “showHiddenDiv” function will execute after 20 sec as it is used in “setTimeOut” with 20 sec. In the next example, we will learn how to redirect the user to another page after 10 sec of page loading.

Redirect user after 10 sec to another page, settimeout.

To redirect the user from the current page to another page we will use “window.location.replace” of JavaScript. Please refer below code to understand more.

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

</body>
</html>

In the above code “RedirectUserToAnotherPage” function is created to redirect the user from one page to another page after 10 sec, this function will be executed after 10 sec as we have written this function in settimeout.

If you like this article, please comment and ask if you have any questions regarding settimeout we will try to answer your questions.

Leave a Comment

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