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:
- The first is the javascript that need to be executed.
- 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
01 02 03 04 05 06 07 08 09 10 | <!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.
1 | <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.
1 2 3 4 5 6 7 8 9 | <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:
2.2 Hiding a DIV after 3 seconds
Let’s add the following simple html code.
1 2 3 4 5 | <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.
1 2 3 4 5 6 7 8 9 | <script type="text/javascript"> $(function () { setTimeout( function(){ jQuery("#container").hide(); } ,3000); });</script> |
The result in the browser would be:
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
