Add Delay to jQuery Code

There are a couple different options to add an execution delay with jQuery. It really depends on what you’re trying to accomplish.

Option 1 – setTimeout()

The following is something to use when your timeout needs to include multiple actions.

Wrap your existing code:

setTimeout(
	function(){
    	//code to execute
    }, 5000);

Create a custom function:

//Delay Function
$.wait = function( callback, seconds){
	return window.setTimeout( callback, seconds * 1000 );
}

Now that your function is ready you can call it on your page with the following:

//You can call your function as needed like this
$.wait( function(){ $("#my-element").fadeIn() }, 5);

You only need to set the full second amount as you’re multiplying in the function to figure full seconds.

If you’re on jQuery > 1.4.0 and only need to tie your timeout to a single event this is the route to go.

$("#my-element").delay(5000).fadeIn();