jQuery setTimeout: 6 Demos including JavaScript
Purpose of setTimeout function
The setTimeout() function of JavaScript is used to delay certain action or execution of the code placed directly inside that function or at another JS function. The delay or time is specified in milliseconds in setTimeout function.
Not only this function is used in native JavaScript but you may use setTimeout in jQuery as well. I will show you how later in this tutorial, so keep reading.
Note: The second “T” is capital in the setTimeout function. All other letters are small.
Using setTimeOut function in jQuery
You may use the setTimeout function in the jQuery code to delay an action. First, let me show a simple example of using setTimeout where I will display an alert by an interval of 3000 milliseconds.
See online demo and code
The following jQuery code is used:
1 2 3 4 5 6 7 |
$(document).ready(function(){ setTimeout(function(){ alert("Using setTimeout in jQuery");}, 2000); }); |
An example of using setTimeout with AJAX post method
In this example, the data is loaded in a div element by using the AJAX $.post method. The code is placed inside the document.ready function, so as demo page loads, the data will be loaded from the text file into the div element.
However, the code of $.post method is written inside the setTimeout method that will delay displaying the text by two seconds.
Have a look at the demo online by clicking the links below:
Following is the complete code for this example: (make sure to place the text file correctly)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.10.1.min.js"></script> <style> .divclass { background: #038D98; height: auto; width:300px; border-radius: 15px; padding:20px; font-size:16px; color:#fff; } </style> </head> <body> <div class="divclass"><p><strong>A demo of setTimeout with jQuery $.post</strong></p> <script type="text/javascript"> $(document).ready(function(){ setTimeout(function(){ $.post("posttst.txt",function(postresult){ $(".divclass").append(postresult); });}, 2000); }); </script> </body> </html> |
You can see the complete code along with markup in the demo page.
A demo of jQuery setTimeout with show/hide method
In this example, a div element is displayed as web page loads. After 3 seconds, the div will disappear by using the hide method of jQuery. The $.hide method is placed inside the setTimeout function.
The $.show and $.hide methods have their own duration parameter, however, this will be in action after the setTimeout interval is finished and $.hide method starts executing. See the demo and code online:
See online demo and code
Notice this code in the <script> section:
1 2 3 4 5 |
setTimeout(function(){ $(".divclass").hide("2000") }, 3000); |
In the $.hide method, I used 2000 milliseconds while setTimeout jQuery function is given the 3000 milliseconds duration. So, the code for hiding the div will start executing after three seconds, and hide method will hide the div in two seconds.
I have placed this code in the document.ready function. You can use this at the click event of a button or link or associate with some other element as well.
Syntax to use setTimeout function in JavaScript
You have to specify two parameters in the setTimeout function. This is how you can use the setTimeout JavaScript function:
1 window.setTimeout(‘Function_to_execute()', 5000);
Or you can use this:
1 setTimeout(‘Function_to_execute()', 5000);
The first parameter is a JS function while other is the time in milliseconds. Rather using the function, you can use the code directly.
Although, there is no difference as for execution in the above syntax, the window.setTimeout specifies the global object window.
An example to display text in a div with three seconds interval
In this demo, a div is created to demonstrate the setTimeout function. As you click the button, “Execute setTimeout function”, a JS function is called where setTimeout function is used. Inside that setTimeout function, another function is called at an interval of 3000 milliseconds that will display the text in an HTML span tag inside that div element. See the demo online:
See online demo and code
The following code is used in the <script> section:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script type="text/javascript"> function timeoutdemo(){ window.setTimeout('disptxt()', 3000); } function disptxt(){ document.getElementById("setTimeoutdemo").innerHTML = "This is setTimeout demo with three seconds interval!"; } </script> |
An example to redirect to another web page with 2 seconds gap
The setTimeout function can be used to redirect to another website with the specified interval as per user’s action or automatically. For example, if the page is idle or you want to redirect after a user’s action, you may do this by setTimeout function as shown below.
See online demo and code
As you click the button “Redirect me to Home page”, it will display an alert and as you press the Ok button, the browser will be redirected to the home page in two seconds.
This code is used:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<script type="text/javascript"> function timeoutdemo(){ alert ("You will be redirected in two seconds!"); window.setTimeout('redirectMe()', 2000); } function redirectMe(){ window.location = "https://www.jquery-az.com/"; } </script> |
A demo to display a pop-up automatically after the web page is loaded
In this example, I am using a third party alert plug-in to pop up a subscription form after five seconds. Simply click the demo link and wait for five seconds to display the alert:
See online demo and code
For the demo, I have used the SweetAlert plug-in, which enables creation of nice JavaScript alerts. After creating the code for the alert, I simply used the setTimeout JavaScript function where I called the function containing SweetAlert code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<script type="text/javascript"> window.setTimeout('JSalert()', 5000); function JSalert(){ swal({ title: "Subscribe for updates!", text: "Enter your email address:", type: "input", showCancelButton: true, closeOnConfirm: false, animation: "slide-from-top", inputPlaceholder: "Your Email address" }, function(inputValue){ if (inputValue === false) return false; if (inputValue === "") { swal.showInputError("Please enter email!"); return false } swal("Action Saved!", "You entered following email: " + inputValue, "success"); }); } </script> |
You may read more about this add-on here, to learn and using in your web projects.
Similarly, you may display a warning, information, confirm and some other popup by using the setTimeout function.