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:

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)

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:

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:

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:

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:

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.