Home » JavaScript » jQuery » JQuery Settimeout Example

About Saeb Najim

Saeb has graduated from the University of Technology. During the last ten years (since 2005) he has been involved with a large number of projects about programming, software engineering, design and analysis . He works as a senior Software Engineer in the e-commerce and web development sector where he is mainly responsible for projects based on Java, Java frameworks, design patterns and Big Data technologies.

JQuery Settimeout Example

The aim of this example is to show you how to use the jQuery setTimeout() method.

Sometimes we need to execute a javascript code after some seconds, the jQuery setTimeout() method can be used for this purpose.

This method takes two parameters:

  1. The first is the javascript that need to be executed.
  2. The second is the delay time in milliseconds.

Let’s look at some examples. To download the jQuery library, click here.
 

1. HTML

First of all you need to create a simple html document.

jQuerySetTimeoutExample.html

<!DOCTYPE html>
<html>
<head>
	<title>jQuery setTimeout Example</title>
	<script src="jquery-2.1.4.min.js"></script>
</head>
<body>

</body>
</html>

2. jQuery setTimeout examples

2.1 Call a method after 2 seconds

Let’s add the following simple html code.

<div id="data" style="border:1px solid #eee;height:50px;width:300px;">Loading...</div>

In the following jQuery code, the line 3 will set timer to call setData() method after 2000 milliseconds. As you can notice, it is easy to delay running any javascript code by using jQuery setTimeout() method.

<script type="text/javascript">
	$(function () {
		setTimeout("setData()",2000);
	});

	function setData(){
		jQuery("#data").html("setData() method is called after 2 seconds");
	}
</script>

The result in the browser would be:

Call method after 2 seconds

Call a method after 2 seconds

2.2 Hiding a DIV after 3 seconds

Let’s add the following simple html code.

<div style="border:1px solid #f00;height:50px;width:300px;background-color:#e0e0e">
	<div id="container">
		This div will be hide after 3 seconds
	</div>	
</div>

As you can notice, in the following example the first setTimeout() method’s argument is an anonymous method that will be called after 3 seconds.

<script type="text/javascript">
	$(function () {
		setTimeout(
			function(){
				jQuery("#container").hide();
			}
		,3000);
	});
</script>

The result in the browser would be:

jquery_settimeout_example2

Hiding a DIV after 3 seconds

3. Conclusion

The jQuery setTimeout() method is useful when we want to delay a javascript code’s execution. This method takes two parameters the first is the javascript that need to be executed and the second is the delay time in milliseconds.

4. Download the source code

Download: You can download the full source code of this example here: jQuery setTimeout example

Do you want to know how to develop your skillset to become a Web Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you our best selling eBooks for FREE!

 

1. Building web apps with Node.js

2. HTML5 Programming Cookbook

3. CSS Programming Cookbook

4. AngularJS Programming Cookbook

5. jQuery Programming Cookbook

6. Bootstrap Programming Cookbook

 

and many more ....

 

I have read and agree to the terms & conditions

 

Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments